defmodule PhoenixDuskmoon.Component.Modal do
  use PhoenixDuskmoon.Component, :html

  import PhoenixDuskmoon.Component.Icons

  @doc """
  Open ad dialog modal.

  ## Examples

  ```heex
  <.dm_modal>
    <:trigger :let={f}>
      <button phx-click={f}>Open</button>
    </:trigger>
    <:title>PhoenixDuskmoon</:title>
    <:body>PhoenixDuskmoon Storybook</:body>
  </.dm_modal>
  ```

  """
  @doc type: :component
  attr(:id, :any, doc: "Modal id")

  attr(:class, :any,
    default: "",
    doc: "Modal class"
  )

  attr(:hide_close, :boolean,
    default: false,
    doc: "Hide top right close button"
  )

  slot(:trigger, doc: "Modal trigger")

  slot(:title, doc: "Modal title") do
    attr(:class, :any, doc: "html class")
  end

  slot(:body, doc: "Modal content", required: true)

  slot(:footer, doc: "Modal footer, buttons") do
    attr(:class, :any, doc: "html class")
  end

  def dm_modal(assigns) do
    assigns =
      assigns
      |> assign_new(:id, fn -> "modal-#{Enum.random(0..999_999)}" end)

    ~H"""
    <%= render_slot(@trigger, @id) %>
    <dialog
      id={@id}
      class={[
        "modal",
        @class
      ]}
    >
      <div class="modal-box">
        <%= unless @hide_close do %>
        <form
          class="absolute right-2 top-2 cursor-pointer"
          method="dialog"
        >
          <button class="btn btn-ghost"><.dm_mdi name={"window-close"} class="w-4 h-4" /></button>
        </form>
        <% end %>
        <section class="flex flex-col min-h-[200px] min-w-[420px]">
          <header :for={title <- @title} class={[
            "flex flex-row font-bold w-full text-2xl",
            Map.get(title, :class, "")
          ]}>
            <%= render_slot(title) %>
          </header>
          <div :for={body <- @body}
            class={[
              "flex flex-1",
              Map.get(body, :class, "")
            ]}
          >
            <%= render_slot(body) %>
          </div>
          <footer
            :for={footer <- @footer}
            class={[
              "modal-action",
              Map.get(footer, :class, "")
            ]}
          >
            <%= render_slot(footer) %>
          </footer>
        </section>
      </div>
    </dialog>
    """
  end
end