freedive/lib/freedive_web/components/liliform.ex

defmodule Liliform.Components do
  use Phoenix.Component, global_prefixes: ["is-", "has-", "flex-", "justify-", "align-"]
  alias Phoenix.LiveView.JS
  import FreediveWeb.Gettext
  import PhxComponentHelpers
  require Logger

  @doc """
  Translates an error message using gettext.
  """
  def translate_error({msg, opts}) do
    # When using gettext, we typically pass the strings we want
    # to translate as a static argument:
    #
    #     # Translate the number of files with plural rules
    #     dngettext("errors", "1 file", "%{count} files", count)
    #
    # However the error messages in our forms and APIs are generated
    # dynamically, so we need to translate them by calling Gettext
    # with our gettext backend as first argument. Translations are
    # available in the errors.po file (as we use the "errors" domain).
    if count = opts[:count] do
      Gettext.dngettext(FreediveWeb.Gettext, "errors", msg, msg, count, opts)
    else
      Gettext.dgettext(FreediveWeb.Gettext, "errors", msg, opts)
    end
  end

  @doc """
  Translates the errors for a field from a keyword list of errors.
  """
  def translate_errors(errors, field) when is_list(errors) do
    for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
  end

  @doc """
  Renders a label.
  """
  attr :for, :string, default: nil, doc: "the for attribute of the label"
  attr :class, :string, default: nil, doc: "the optional class of the label"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the label"
  slot :inner_block, required: true, doc: "the inner block that renders the label content"

  def label(assigns) do
    assigns =
      assigns
      |> extend_class("label")
      |> set_attributes([:for])
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <label {@heex_for} {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </label>
    """
  end

  @doc """
  Renders an input with label and error messages.

  A `Phoenix.HTML.FormField` may be passed as argument,
  which is used to retrieve the input name, id, and values.
  Otherwise all attributes may be passed explicitly.

  ## Types

  This function accepts all HTML input types, considering that:

    * You may also set `type="select"` to render a `<select>` tag

    * `type="checkbox"` is used exclusively to render boolean values

    * For live file uploads, see `Phoenix.Component.live_file_input/1`

  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
  for more information.

  ## Examples

      <.input field={@form[:email]} type="email" />
      <.input name="my-input" errors={["oh no!"]} />
  """
  attr :id, :any, default: nil
  attr :name, :any
  attr :label, :string, default: nil
  attr :value, :any

  attr :type, :string,
    default: "text",
    values: ~w(checkbox color date datetime-local email file hidden month number password
               range radio search select tel text textarea time url week)

  attr :field, Phoenix.HTML.FormField,
    doc: "a form field struct retrieved from the form, for example: @form[:email]"

  attr :errors, :list, default: []
  attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
  attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
  attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
  attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"

  attr :rest, :global,
    include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
                multiple pattern placeholder readonly required rows size step)

  slot :inner_block

  def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
    assigns
    |> assign(field: nil, id: assigns.id || field.id)
    |> assign(:errors, Enum.map(field.errors, &translate_error(&1)))
    |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
    |> assign_new(:value, fn -> field.value end)
    |> input()
  end

  def input(%{type: "checkbox"} = assigns) do
    assigns =
      assign_new(assigns, :checked, fn ->
        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
      end)

    ~H"""
    <div class="field" phx-feedback-for={@name}>
      <label class="label">
        <input type="hidden" name={@name} value="false" />
        <input
          type="checkbox"
          id={@id}
          name={@name}
          value="true"
          checked={@checked}
          class="checkbox focus:ring-0"
          {@rest}
        />
        <%!-- todo: is focus:ring-0 part of tailwind? if yes, find alternative/remove --%>
        <%= @label %>
      </label>
      <.error :for={msg <- @errors}><%= msg %></.error>
    </div>
    """
  end

  def input(%{type: "select"} = assigns) do
    ~H"""
    <div class="field" phx-feedback-for={@name}>
      <.label for={@id}><%= @label %></.label>
      <select
        id={@id}
        name={@name}
        class="select focus:border-zinc-400 focus:ring-0 sm:text-sm"
        multiple={@multiple}
        {@rest}
      >
        <option :if={@prompt} value=""><%= @prompt %></option>
        <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
      </select>
      <.error :for={msg <- @errors}><%= msg %></.error>
    </div>
    """
  end

  def input(%{type: "textarea"} = assigns) do
    ~H"""
    <div class="field" phx-feedback-for={@name}>
      <.label for={@id}><%= @label %></.label>
      <textarea
        id={@id}
        name={@name}
        class={[
          "textarea focus:ring-0",
          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
          @errors == [] && "border-zinc-300 focus:border-zinc-400",
          @errors != [] && "border-rose-400 focus:border-rose-400"
        ]}
        {@rest}
      ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
      <.error :for={msg <- @errors}><%= msg %></.error>
    </div>
    """
  end

  # All other inputs text, datetime-local, url, password, etc. are handled here...
  def input(assigns) do
    ~H"""
    <div class="field" phx-feedback-for={@name}>
      <.label for={@id}><%= @label %></.label>
      <input
        type={@type}
        name={@name}
        id={@id}
        value={Phoenix.HTML.Form.normalize_value(@type, @value)}
        class={[
          "input focus:ring-0",
          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
          @errors == [] && "border-zinc-300 focus:border-zinc-400",
          @errors != [] && "border-rose-400 focus:border-rose-400"
        ]}
        {@rest}
      />
      <.error :for={msg <- @errors}><%= msg %></.error>
    </div>
    """
  end

  @doc """
  Renders section.
  """
  attr :class, :string, default: nil, doc: "the optional class of the section"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the section"

  slot :inner_block, required: true, doc: "the inner block that renders the section content"

  def section(assigns) do
    assigns =
      assigns
      |> extend_class("section")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <section {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </section>
    """
  end

  @doc """
  Renders box.
  """
  attr :class, :string, default: nil, doc: "the optional class of the box"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the box"

  slot :inner_block, required: true, doc: "the inner block that renders the box content"

  def box(assigns) do
    assigns =
      assigns
      |> extend_class("box")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders container.
  """
  attr :class, :string, default: nil, doc: "the optional class of the container"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the container"

  slot :inner_block, required: true, doc: "the inner block that renders the container content"

  def container(assigns) do
    assigns =
      assigns
      |> extend_class("container")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders footer.
  """
  attr :class, :string, default: nil, doc: "the optional class of the footer"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the footer"

  slot :inner_block, required: true, doc: "the inner block that renders the footer content"

  def footer(assigns) do
    assigns =
      assigns
      |> extend_class("footer")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <footer {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </footer>
    """
  end

  @doc """
  Renders media object.
  """
  attr :class, :string, default: nil, doc: "the optional class of the media object"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the media object"

  slot :inner_block, required: true, doc: "the inner block that renders the media object content"

  def media(assigns) do
    assigns =
      assigns
      |> extend_class("media")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <article {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </article>
    """
  end

  @doc """
  Renders media-left.
  """
  attr :class, :string, default: nil, doc: "the optional class of the media-left"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the media-left"

  slot :inner_block, required: true, doc: "the inner block that renders the media-left content"

  def media_left(assigns) do
    assigns =
      assigns
      |> extend_class("media-left")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <figure {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </figure>
    """
  end

  @doc """
  Renders media-content.
  """
  attr :class, :string, default: nil, doc: "the optional class of the media-content"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the media-content"

  slot :inner_block, required: true, doc: "the inner block that renders the media-content content"

  def media_content(assigns) do
    assigns =
      assigns
      |> extend_class("media-content")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders media-right.
  """
  attr :class, :string, default: nil, doc: "the optional class of the media-right"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the media-right"

  slot :inner_block, required: true, doc: "the inner block that renders the media-right content"

  def media_right(assigns) do
    assigns =
      assigns
      |> extend_class("media-right")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders content.
  """
  attr :class, :string, default: nil, doc: "the optional class of the content"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the content"

  slot :inner_block, required: true, doc: "the inner block that renders the content"

  def content(assigns) do
    assigns =
      assigns
      |> extend_class("content")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders a level.
  """
  attr :class, :string, default: nil, doc: "the optional class of the level"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the level"

  slot :inner_block, required: true, doc: "the inner block that renders the level content"

  def level(assigns) do
    assigns =
      assigns
      |> extend_class("level")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <nav {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </nav>
    """
  end

  @doc """
  Renders level-left.
  """
  attr :class, :string, default: nil, doc: "the optional class of the level-left"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the level-left"

  slot :inner_block, required: true, doc: "the inner block that renders the level-left content"

  def level_left(assigns) do
    assigns =
      assigns
      |> extend_class("level-left")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders level-right.
  """
  attr :class, :string, default: nil, doc: "the optional class of the level-right"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the level-right"

  slot :inner_block, required: true, doc: "the inner block that renders the level-right content"

  def level_right(assigns) do
    assigns =
      assigns
      |> extend_class("level-right")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders level-item.
  """
  attr :class, :string, default: nil, doc: "the optional class of the level-item"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the level-item"

  slot :inner_block, required: true, doc: "the inner block that renders the level-item content"

  def level_item(assigns) do
    assigns =
      assigns
      |> extend_class("level-item")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders columns.
  """
  attr :class, :string, default: nil, doc: "the optional class of the columns"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the column"

  slot :inner_block, required: true, doc: "the inner block that renders the columns content"

  def columns(assigns) do
    assigns =
      assigns
      |> extend_class("columns")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders column.
  """
  attr :class, :string, default: nil, doc: "the optional class of the column"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the column"

  slot :inner_block, required: true, doc: "the inner block that renders the column content"

  def column(assigns) do
    assigns =
      assigns
      |> extend_class("column")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders button.
  """
  attr :id, :string, required: false, doc: "the id of the button"
  attr :type, :string, default: "button", doc: "the type of the button"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the button"

  slot :inner_block, required: true, doc: "the inner block that renders the button content"

  def button(assigns) do
    assigns =
      assigns
      |> extend_class("button")
      |> set_attributes([:type, :id])
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <button {@heex_id} {@heex_type} {@heex_phx_attributes} {@heex_class} {@rest}>
      <%= render_slot(@inner_block) %>
    </button>
    """
  end

  @doc """
  Renders hero section.
  """
  attr :id, :string, required: false, doc: "the id of the hero section"
  attr :class, :string, default: nil, doc: "the optional class of the hero section"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the hero section"

  slot :inner_block, required: true, doc: "the inner block that renders the hero content"

  def hero(assigns) do
    assigns =
      assigns
      |> extend_class("hero")
      |> set_attributes([:id])
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <section {@heex_id} {@heex_class} {@heex_phx_attributes} {@rest}>
      <div class="hero-body">
        <%= render_slot(@inner_block) %>
      </div>
    </section>
    """
  end

  @doc """
  Renders title.
  """
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the button"

  slot :inner_block, required: true, doc: "the inner block that renders the title content"

  def title(assigns) do
    assigns
    |> extend_class("title")
    |> set_phx_attributes()
    |> set_bulma_classes()
    |> render_bulma_heading()
  end

  @doc """
  Renders subtitle.
  """
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the button"

  slot :inner_block, required: true, doc: "the inner block that renders the subtitle content"

  def subtitle(assigns) do
    assigns
    |> extend_class("subtitle")
    |> set_phx_attributes()
    |> set_bulma_classes()
    |> render_bulma_heading()
  end

  @doc """
  Renders navbar.
  """
  attr :class, :string, default: nil, doc: "the optional class of the navbar"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the navbar"

  slot :inner_block, required: true, doc: "the inner block that renders the navbar content"

  def navbar(assigns) do
    assigns =
      assigns
      |> extend_class("navbar")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <nav {@heex_class} {@heex_phx_attributes} {@rest} role="navigation" aria-label="main navigation">
      <%= render_slot(@inner_block) %>
    </nav>
    """
  end

  @doc """
  Renders navbar-brand.
  """
  attr :class, :string, default: nil, doc: "the optional class of the navbar-brand"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the navbar-brand"

  slot :inner_block, required: true, doc: "the inner block that renders the navbar-brand content"

  def navbar_brand(assigns) do
    assigns =
      assigns
      |> extend_class("navbar-brand")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders navbar-menu.
  """
  attr :id, :string, required: true, doc: "the id of the navbar-menu"
  attr :class, :string, default: nil, doc: "the optional class of the navbar-menu"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the navbar-menu"

  slot :inner_block, required: true, doc: "the inner block that renders the navbar-menu content"

  def navbar_menu(assigns) do
    assigns =
      assigns
      |> extend_class("navbar-menu")
      |> set_attributes([:id])
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_id} {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders navbar-start.
  """
  attr :class, :string, default: nil, doc: "the optional class of the navbar-start"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the navbar-start"

  slot :inner_block, required: true, doc: "the inner block that renders the navbar-start content"

  def navbar_start(assigns) do
    assigns =
      assigns
      |> extend_class("navbar-start")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders navbar-end.
  """
  attr :class, :string, default: nil, doc: "the optional class of the navbar-end"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the navbar-end"

  slot :inner_block, required: true, doc: "the inner block that renders the navbar-end content"

  def navbar_end(assigns) do
    assigns =
      assigns
      |> extend_class("navbar-end")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders navbar-item.
  """
  attr :class, :string, default: nil, doc: "the optional class of the navbar-item"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the navbar-item"

  slot :inner_block, required: true, doc: "the inner block that renders the navbar-item content"

  def navbar_item(assigns) do
    assigns =
      assigns
      |> extend_class("navbar-item")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders navbar-dropdown.
  """
  attr :class, :string, default: nil, doc: "the optional class of the navbar-dropdown"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the navbar-dropdown"

  slot :inner_block,
    required: true,
    doc: "the inner block that renders the navbar-dropdown content"

  def navbar_dropdown(assigns) do
    assigns =
      assigns
      |> extend_class("navbar-dropdown")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  @doc """
  Renders navbar-link.
  """
  attr :class, :string, default: nil, doc: "the optional class of the navbar-link"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the navbar-link"

  slot :inner_block, required: true, doc: "the inner block that renders the navbar-link content"

  def navbar_link(assigns) do
    assigns =
      assigns
      |> extend_class("navbar-link")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <a {@heex_class} {@heex_phx_attributes} {@rest}>
      <%= render_slot(@inner_block) %>
    </a>
    """
  end

  @doc """
  Renders navbar-divider.
  """
  attr :class, :string, default: nil, doc: "the optional class of the navbar-divider"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the navbar-divider"

  def navbar_divider(assigns) do
    assigns =
      assigns
      |> extend_class("navbar-divider")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <hr {@heex_class} {@heex_phx_attributes} {@rest} />
    """
  end

  @doc """
  Renders navbar-burger.
  """
  attr :target, :string, required: true, doc: "the target of the navbar-burger"
  attr :size, :string, default: "1.6rem", doc: "the size of the navbar-burger"
  attr :class, :string, default: nil, doc: "the optional class of the navbar-burger"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the navbar-burger"

  def navbar_burger(assigns) do
    assigns =
      assigns
      |> extend_class("navbar-burger")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <a
      role="button"
      aria-label="menu"
      aria-expanded="false"
      data-target={@target}
      {@heex_class}
      {@heex_phx_attributes}
      {@rest}
    >
      <Lucideicons.menu height={@size} width={@size} />
    </a>
    """
  end

  @doc """
  Renders search input.
  """
  attr :id, :string, required: true, doc: "the id of the search input"
  attr :name, :string, required: true, doc: "the name of the search input"
  attr :value, :string, default: nil, doc: "the value of the search input"
  attr :placeholder, :string, default: nil, doc: "the placeholder of the search input"
  attr :class, :string, default: nil, doc: "the optional class of the search input"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the search input"

  slot :inner_block, required: true, doc: "the inner block that renders the search input content"
  slot :icon_left, doc: "the slot for the left icon"
  slot :icon_right, doc: "the slot for the right icon"

  def search_input(assigns) do
    assigns =
      assigns
      |> extend_class("control has-icons-left has-icons-right")
      |> set_phx_attributes()
      |> set_bulma_classes()

    ~H"""
    <div {@heex_class} {@rest}>
      <input
        id={@id}
        name={@name}
        class="input"
        type="text"
        value={@value}
        placeholder={@placeholder}
        {@heex_phx_attributes}
      />
      <%= if @icon_left != [] do %>
        <span class="icon is-left">
          <%= render_slot(@icon_left) %>
        </span>
      <% end %>
      <%= if @icon_right != [] do %>
        <span class="icon is-right">
          <%= render_slot(@icon_right) %>
        </span>
      <% end %>
    </div>
    """
  end

  # @doc """
  # Renders a header with title.
  # """
  # attr :class, :string, default: nil

  # slot :inner_block, required: true
  # slot :subtitle
  # slot :actions

  # def header(assigns) do
  #   ~H"""
  #   <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
  #     <div>
  #       <h1 class="text-lg font-semibold leading-8 text-zinc-800">
  #         <%= render_slot(@inner_block) %>
  #       </h1>
  #       <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
  #         <%= render_slot(@subtitle) %>
  #       </p>
  #     </div>
  #     <div class="flex-none"><%= render_slot(@actions) %></div>
  #   </header>
  #   """
  # end

  @doc """
  Generates a generic error message.
  """
  slot :inner_block, required: true

  def error(assigns) do
    ~H"""
    <p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
      <%!-- <.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" /> --%>
      <Lucideicons.circle_alert class="ison-small flex-none" aria-hidden />
      <%= render_slot(@inner_block) %>
    </p>
    """
  end

  @doc """
  Renders a simple form.

  ## Examples

      <.simple_form for={@form} phx-change="validate" phx-submit="save">
        <.input field={@form[:email]} label="Email"/>
        <.input field={@form[:username]} label="Username" />
        <:actions>
          <.button>Save</.button>
        </:actions>
      </.simple_form>
  """
  attr :for, :any, required: true, doc: "the datastructure for the form"
  attr :as, :any, default: nil, doc: "the server side parameter to collect all input under"

  attr :rest, :global,
    include: ~w(autocomplete name rel action enctype method novalidate target multipart),
    doc: "the arbitrary HTML attributes to apply to the form tag"

  slot :inner_block, required: true
  slot :actions, doc: "the slot for form actions, such as a submit button"

  def simple_form(assigns) do
    ~H"""
    <.form :let={f} for={@for} as={@as} {@rest}>
      <div class="box">
        <%= render_slot(@inner_block, f) %>
        <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
          <%= render_slot(action, f) %>
        </div>
      </div>
    </.form>
    """
  end

  @doc """
  Renders flash notices.

  ## Examples

      <.flash kind={:info} flash={@flash} />
      <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
  """
  attr :id, :string, doc: "the optional id of flash container"
  attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
  attr :title, :string, default: nil, doc: "optional title for flash message"
  attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"

  slot :inner_block, doc: "the optional inner block that renders the flash message"

  def flash(assigns) do
    assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)
    # IO.inspect(assigns.rest)

    ~H"""
    <.hero
      :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
      id={@id}
      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
      role="alert"
      class={
        Enum.join(
          [
            "is-small",
            @kind == :info && "is-info",
            @kind == :error && "is-warning"
          ],
          " "
        )
      }
      {@rest}
    >
      <.media>
        <.media_left>
          <Lucideicons.info :if={@kind == :info} class="icon-small" aria-hidden />
          <Lucideicons.triangle_alert :if={@kind == :error} class="icon-small" aria-hidden />
        </.media_left>
        <.media_content>
          <.content>
            <.title :if={@title} is-4>
              <%= @title %>
            </.title>
            <.subtitle is-6>
              <%= msg %>
            </.subtitle>
          </.content>
        </.media_content>
        <.media_right is-hidden-touch>
          <.button aria-label={gettext("close")} phx-click={hide("##{@id}")}>
            <Lucideicons.circle_x class="h-10 w-10" aria-hidden />
          </.button>
        </.media_right>
      </.media>
    </.hero>
    """
  end

  @doc """
  Shows the flash group with standard titles and content.

  ## Examples

      <.flash_group flash={@flash} />
  """
  attr :flash, :map, required: true, doc: "the map of flash messages"
  attr :id, :string, default: "flash-group", doc: "the optional id of flash container"

  def flash_group(assigns) do
    ~H"""
    <div id={@id}>
      <.flash kind={:info} title={gettext("Info")} flash={@flash} is-info />
      <.flash kind={:error} title={gettext("Error")} flash={@flash} is-danger />
      <.flash
        id="client-error"
        kind={:error}
        title={gettext("We can't find the internet")}
        phx-disconnected={show("#client-error")}
        phx-connected={hide("#client-error")}
        is-hidden
        is-warning
      >
        <%= gettext("Attempting to reconnect") %>
        <Lucideicons.refresh_cw class="h-4 w-4 animate-spin is-inline-block" aria-hidden />
      </.flash>

      <.flash
        id="server-error"
        kind={:error}
        title={gettext("Something went wrong!")}
        phx-disconnected={show("#server-error")}
        phx-connected={hide("#server-error")}
        is-hidden
        is-warning
      >
        <%= gettext("Hang in there while we get back on track") %>
        <Lucideicons.refresh_cw class="h-4 w-4 animate-spin is-inline-block" aria-hidden />
      </.flash>
    </div>
    """
  end

  ## JS Commands

  def show(js \\ %JS{}, selector) do
    JS.remove_class(js, "is-hidden",
      to: selector,
      time: 100,
      transition:
        {"transition-all transform ease-out duration-300",
         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
         "opacity-100 translate-y-0 sm:scale-100"}
    )
  end

  def hide(js \\ %JS{}, selector) do
    JS.add_class(js, "is-hidden",
      to: selector,
      time: 200,
      transition:
        {"transition-all transform ease-in duration-200",
         "opacity-100 translate-y-0 sm:scale-100",
         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
    )
  end

  ## Private functions

  defp set_bulma_classes(assigns, opts \\ []) do
    opts = Keyword.put_new(opts, :from, :rest)

    assigns =
      assigns
      |> set_prefixed_attributes(["is-"], Keyword.put_new(opts, :into, :bulma_is))
      |> set_prefixed_attributes(["has-"], Keyword.put_new(opts, :into, :bulma_has))
      |> set_prefixed_attributes(["flex-"], Keyword.put_new(opts, :into, :bulma_flex))
      |> set_prefixed_attributes(["justify-"], Keyword.put_new(opts, :into, :bulma_justify))
      |> set_prefixed_attributes(["align-"], Keyword.put_new(opts, :into, :bulma_align))

    bulma_classes =
      []
      |> Enum.concat(for({is, _} <- assigns.heex_bulma_is, do: to_string(is)))
      |> Enum.concat(for({has, _} <- assigns.heex_bulma_has, do: to_string(has)))
      |> Enum.concat(for({flex, _} <- assigns.heex_bulma_flex, do: to_string(flex)))
      |> Enum.concat(for({justify, _} <- assigns.heex_bulma_justify, do: to_string(justify)))
      |> Enum.concat(for({align, _} <- assigns.heex_bulma_align, do: to_string(align)))

    if assigns.heex_class do
      class =
        assigns.heex_class[:class]
        |> String.split(" ")
        |> Enum.concat(bulma_classes)
        # todo: where is this coming from?
        |> Enum.reject(&(&1 == "false"))
        |> Enum.join(" ")

      assigns |> Map.put(:heex_class, class: class)
    else
      assigns |> Map.put(:heex_class, class: bulma_classes |> Enum.join(" "))
    end
  end

  slot :inner_block, required: true

  defp render_bulma_heading(assigns) do
    level =
      assigns
      |> Map.filter(fn assign ->
        case assign do
          {:"is-1", _} -> true
          {:"is-2", _} -> true
          {:"is-3", _} -> true
          {:"is-4", _} -> true
          {:"is-5", _} -> true
          {:"is-6", _} -> true
          _ -> false
        end
      end)
      |> Map.keys()
      |> List.first()
      |> Atom.to_string()
      |> String.split("-")
      |> List.last()

    level =
      case level do
        # todo: where is this coming from?
        "nil" -> 3
        _ -> String.to_integer(level)
      end

    case level do
      1 ->
        ~H"<h1 {@heex_class} {@heex_phx_attributes} {@rest}><%= render_slot(@inner_block) %></h1>"

      2 ->
        ~H"<h2 {@heex_class} {@heex_phx_attributes} {@rest}><%= render_slot(@inner_block) %></h2>"

      3 ->
        ~H"<h3 {@heex_class} {@heex_phx_attributes} {@rest}><%= render_slot(@inner_block) %></h3>"

      4 ->
        ~H"<h4 {@heex_class} {@heex_phx_attributes} {@rest}><%= render_slot(@inner_block) %></h4>"

      5 ->
        ~H"<h5 {@heex_class} {@heex_phx_attributes} {@rest}><%= render_slot(@inner_block) %></h5>"

      6 ->
        ~H"<h6 {@heex_class} {@heex_phx_attributes} {@rest}><%= render_slot(@inner_block) %></h6>"
    end
  end
end