live_antd

defmodule LiveAntd.Components.Modal do
  @moduledoc """
  Modal dialogs.

  ## API

  * [ ] `afterClose`:	Specify a function that will be called when modal is closed completely	function	-
  * [ ] `bodyStyle`: Body style for modal body element. Such as height, padding etc	CSSProperties
  * [ ] `cancelButtonProps`: The cancel button props	ButtonProps	-
  * [x] `cancelText`: Text of the Cancel button	ReactNode	Cancel
  * [ ] `centered`: Centered Modal	boolean	false
  * [ ] `closable`: Whether a close (x) button is visible on top right of the modal dialog or not	boolean	true
  * [ ] `closeIcon`: Custom close icon
  * [ ] `confirmLoading`:	Whether to apply loading visual effect for OK button or not	boolean	false
  * [ ] `destroyOnClose`:	Whether to unmount child components on onClose	boolean	false
  * [ ] `footer`:	Footer content, set as footer={null} when you don't need default buttons	ReactNode	(OK and Cancel buttons)
  * [ ] `forceRender`:	Force render Modal	boolean	false
  * [ ] `focusTriggerAfterClose`:	Whether need to focus trigger element after dialog is closed	boolean	true	4.9.0
  * [ ] `getContainer`:	Return the mount node for Modal	HTMLElement.
  * [ ] `keyboard`:	Whether support press esc to close	boolean	true
  * [ ] `mask`:	Whether show mask or not	boolean	true
  * [ ] `maskClosable`:	Whether to close the modal dialog when the mask (area outside the modal) is clicked	boolean	true
  * [ ] `maskStyle`:	Style for modal's mask element	CSSProperties
  * [ ] `modalRender`:	Custom modal content render	(node: ReactNode) => ReactNode	-	4.7.0
  * [ ] `okButtonProps`:	The ok button props	ButtonProps	-
  * [x] `okText`:	Text of the OK button	ReactNode	OK
  * [ ] `okType`:	Button type of the OK button	string	primary
  * [x] `style`:	Style of floating layer, typically used at least for adjusting the position	CSSProperties	-
  * [x] `title`:	The modal dialog's title
  * [x] `visible`:	Whether the modal dialog is visible or not
  * [x] `width`:	Width of the modal dialog	string
  * [ ] `wrapClassName`:	The class name of the container of the modal dialog	string	-
  * [ ] `zIndex`: The z-index of the Modal
  * [x] `onCancel`:	Specify a function that will be called when a user clicks mask, close button on top right or Cancel button	function(e)	-
  * [x] `onOk`:	Specify a function that will be called when a user clicks the OK button


  ## Example

    <Modal
      onOk={{ @okText }}
      onCancel={{ @cancelText }}
    >
    Modal Content
    </Modal>
  """

  use Surface.Component

  alias LiveAntd.Components.Button

  # event
  prop(onCancel, :event)
  prop(onOk, :event)

  # api property
  prop(visible, :boolean, default: false)
  prop(title, :string, default: "basic title")
  prop(cancalText, :string, default: "cancel")
  prop(okText, :string, default: "ok")
  prop(width, :string, default: "520px")

  # basic property
  prop(class, :css_class)
  prop(style, :string, default: "foo: bar")

  # slot
  slot(default, required: true)

  def render(assigns) do
    ~H"""
    <div
      :show={{ @visible }}
      class={{
        "ant-modal-root",
        class_value(@class)
      }}
    >
      <div class="ant-modal-mask"></div>
      <div tabindex="-1" class="ant-modal-wrap" role="dialog">
        <div
          role="document"
          class="ant-modal"
          style="{{
            "width: #{@width}; transform-origin: -246px 1px; #{@style}"
          }}"
        >
          <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
          <div class="ant-modal-content">
            <Button
              class="ant-modal-close"
              onClick={{ @onCancel }}
            >
              <span class="ant-modal-close-x">
                <span role="img" aria-label="close"
                  class="anticon anticon-close ant-modal-close-icon">
                  <svg viewBox="64 64 896 896" focusable="false" class=""
                    data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                    <path
                      d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z">
                    </path>
                  </svg>
                </span>
              </span>
            </Button>
            <div class="ant-modal-header">
              <div class="ant-modal-title">{{ @title }}</div>
            </div>
            <div class="ant-modal-body">
              <slot/>
            </div>
            <div class="ant-modal-footer">
              <Button onClick={{ @onCancel }}>
                <span>{{ @cancalText }}</span>
              </Button>
              <Button onClick={{ @onOk }}>
                <span>{{ @okText }}</span>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
    """
  end

  defp class_value(class) do
    class || get_config(:default_class)
  end
end