defmodule PhenixStorybook.Components.Modal.ModalHeader do
  use PhenixStorybook, :component

  @default_class "flex w-full"

  attr(:id, :string, default: nil)
  attr(:title, :string, doc: "Text title", default: nil)
  attr(:title_class, :string, doc: "The title class", default: nil)
  attr(:icon, :string, doc: "Icon displayed above the title.")
  attr(:close_modal_event, :any, doc: "Event to be triggered when closing the modal")
  attr(:with_sidebar, :boolean, doc: "The modal has a sidebar")

  attr(:full_screen, :boolean,
    doc: "The modal is extended to the (almost) full screen",
    default: false
  )

  attr(:"phx-target", :string, doc: "Phx target of the modal")

  @doc """
  This component has one hide event.

  Default event is "close_modal", legacy name of previous hook that was set on modal.
  Can be changed with `close_modal_event` in assigns.

  Use phx-target to change target of event (live view or component), it has same effect as phx-target.
  See https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html#module-targeting-component-events.
  """
  def modal_header(assigns) do
    assigns
    |> set_theme()
    |> set_phx_attributes()
    |> set_attributes([:icon, :title])
    |> set_attributes(close_modal_event: "close_modal")
    |> extend_class(&modal_header_class/1)
    |> extend_class(&close_button_class/1, attribute: :close_button_class)
    |> extend_class("fal fa-times", attribute: :close_icon_class)
    |> extend_class(&icon_wrapper_class/1, attribute: :icon_wrapper_class)
    |> extend_class("", attribute: :icon)
    |> extend_class(&title_class/1, attribute: :title_class)
    |> render()
  end

  defp render(assigns) do
    ~H"""
    <div {@heex_class} id={@id}>
      <button
        {@heex_close_button_class}
        {@heex_phx_attributes}
        phx-click={@close_modal_event}
        phx-key="escape"
        type="button"
        phx-window-keydown={@close_modal_event}
      >
        <i {@heex_close_icon_class}></i>
      </button>

      <div :if={@icon != ""} {@heex_icon_wrapper_class}>
        <i {@heex_icon}></i>
      </div>

      <h1 :if={@title} {@heex_title_class} style="font-weight: 500; font-size: 1.125rem;">
        {@title}
      </h1>
    </div>
    """
  end

  defp close_button_class(_assigns = %{theme: theme}) do
    "modal-close-btn absolute top-1.5 right-1.5 h-7 w-7 flex justify-center cursor-pointer \
    items-center p-1.5 z-10 focus:outline-none bg-default-bg hover:bg-default-bg-hover \
    text-default-txt #{window_rounded(theme)}"
  end

  defp modal_header_class(assigns) do
    case assigns do
      %{with_sidebar: true} ->
        "#{@default_class} flex-row col-span-full md:col-span-2 items-center justify-start space-x-4 h-28"

      %{full_screen: true} ->
        "flex flex-row gap-4 px-8 pb-4 border-b border-default-border items-center justify-start"

      _ ->
        "#{@default_class} flex-col items-center"
    end
  end

  defp icon_wrapper_class(assigns) do
    class =
      "flex items-center justify-center h-14 w-14 rounded-full border border-default-border text-xl text-primary-txt"

    if assigns[:full_screen] do
      class
    else
      "#{class} mx-auto"
    end
  end

  defp title_class(assigns) do
    class =
      "text-lg! leading-6 font-medium font-medium! text-gray-default mt-2 sm:mt-5 whitespace-nowrap overflow-hidden text-ellipsis w-4/5"

    if assigns[:full_screen] do
      "#{class} text-left"
    else
      "#{class} text-center"
    end
  end
end