defmodule LiveAntd.Components.Drawer do
  @moduledoc """

  A panel which slides in from the edge of the screen.

  ## API

    * [ ] `afterVisibleChange`:	Callback after the animation ends when switching drawers	function(visible)	-
    * [x] `bodyStyle`:	Style of the drawer content part	object	-
    * [ ] `closable`:	Whether a close (x) button is visible on top right of the Drawer dialog or not	boolean	true
    * [ ] `closeIcon`:	Custom close icon	ReactNode	<CloseOutlined />
    * [ ] `destroyOnClose`:	Whether to unmount child components on closing drawer or not	boolean	false
    * [x] `drawerStyle`:	Style of the popup layer element
    * [x] `footer`:	The footer for Drawer
    * [x] `footerStyle`:	Style of the drawer footer part	CSSProperties	-
    * [ ] `forceRender`:	Prerender Drawer component forcely	boolean	false
    * [ ] `getContainer`:	Return the mounted node for Drawer	HTMLElement | () => HTMLElement | Selectors | false	body
    * [x] `headerStyle`:	Style of the drawer header part	object	-
    * [x] `height`:	Placement is top or bottom, height of the Drawer dialog	string | number	256
    * [ ] `keyboard`:	Whether support press esc to close	boolean	true
    * [ ] `mask`:	Whether to show mask or not	boolean	true
    * [ ] `maskClosable`:	Clicking on the mask (area outside the Drawer) to close the Drawer or not	boolean	true
    * [ ] `maskStyle`:	Style for Drawer's mask element	CSSProperties	{}
    * [x] `placement`:	The placement of the Drawer	top | right | bottom | left	right
    * [ ] `push`:	Nested drawers push behavior	boolean | { distance: string | number }	{ distance: 180 }	4.5.0+
    * [x] `title`:	The title for Drawer	ReactNode	-
    * [x] `visible`:	Whether the Drawer dialog is visible or not	boolean	false
    * [x] `width`:	Width of the Drawer dialog	string | number	256
    * [x] `zIndex`:	The z-index of the Drawer	number	1000
    * [x] `onClose`:	Specify a callback that will be called when a user clicks mask, close button or Cancel button	function(e)

  ## Example

    <Drawer
      title={{@title}}
      vivisble={{@visible}}
    />

  """

  use Surface.Component

  alias LiveAntd.Components.Button

  prop(onClose, :event)

  prop(placement, :string, values: ~w(top right bottom left), default: "right")
  prop(drawerStyle, :string)
  prop(headStyle, :string)
  prop(footerStyle, :string)
  prop(footer, :string)

  prop(height, :string)
  prop(visible, :boolean)
  prop(title, :string)
  prop(class, :css_class)
  prop(bodyStyle, :string, default: "foo: bar")
  prop(style, :string, default: "foo: bar")
  prop(width, :string, default: "800px")
  prop(zIndex, :integer, default: 1000)

  # slot
  slot(default, required: true)

  def render(assigns) do
    ~H"""
    <div
      tabindex="-1"
      class={{
        "ant-drawer",
        "ant-drawer-open": @visible,
        "ant-drawer-#{@placement}": @placement,
      }}
      style="margin-top: 60px;"
      :if={{@visible}}
    >
      <div class="ant-drawer-mask" :on-click={{@onClose}}></div>
      <div
        class={{
          "ant-drawer-content-wrapper",
          class_value(@class)
        }}
        style="{{
          "width: #{@width}"
        }}"
      >
        <div class="ant-drawer-content">
          <div class="ant-drawer-wrapper-body">
            <div class="ant-drawer-header" style="{{ @headStyle }}">
              <div class="ant-drawer-title">{{@title}}</div>
              <Button type="button" onClick={{@onClose}} aria-label="Close" class="ant-drawer-close" style="--scroll-bar:0px;"><span role="img" aria-label="close" class="anticon anticon-close"><svg viewBox="64 64 896 896" focusable="false" 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></Button>
            </div>
            <div
              class="ant-drawer-body"
              style="{{
                "background: #e2dfdf; #{@bodyStyle}"
              }}"
            >
              <slot/>
            </div>
          </div>
        </div>
      </div>
    </div>
    """
  end

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