defmodule SigmaKit.Components.SideNav do
  use Phoenix.LiveComponent
  import SigmaKit.Components.Icons, only: [icon: 1]

  slot :inner_block, required: true
  slot :logo

  def sidenav(assigns) do
    ~H"""
    <div>
      <div class="mb-8 text-center">
        {render_slot(@logo)}
      </div>
      {render_slot(@inner_block)}
    </div>
    """
  end

  attr :title, :string, required: true
  slot :inner_block, required: true

  def sidenav_section(assigns) do
    ~H"""
    <div>
      <div class="text-xs font-black mt-8 text-gray-400 uppercase mb-2">{@title}</div>
      {render_slot(@inner_block)}
    </div>
    """
  end

  attr :title, :string, required: true
  attr :icon, :string, required: true
  attr :to, :string, required: true
  attr :active, :boolean, default: false
  attr :new, :boolean, default: false

  def sidenav_item(assigns) when assigns.new == false do
    ~H"""
    <.link
      navigate={@to}
      class={[
        "flex items-center gap-2 py-2 px-3 text-sm cursor-pointer rounded font-medium transition-all duration-300 group",
        !@active && "hover:bg-gray-100",
        @active && "bg-primary-700"
      ]}
    >
      <.icon
        :if={assigns[:icon]}
        name={@icon}
        class={[
          "w-4 h-4  transition-colors duration-900 group-hover:transition-colors",
          @active && "text-primary-100",
          !@active && "text-primary-500 group-hover:text-secondary-500 "
        ]}
      />
      <div class={[
        "transition-all",
        @active && "text-zinc-50 text-primary-100",
        !@active && "text-zinc-600 group-hover:text-primary-500"
      ]}>
        {@title}
      </div>
    </.link>
    """
  end

  def sidenav_item(assigns) when assigns.new == true do
    ~H"""
    <a
      href={@to}
      target="_new"
      class="flex items-center gap-2 py-2 px-3 text-sm hover:bg-gray-100 cursor-pointer rounded font-medium transition-all duration-300 group"
    >
      <.icon
        :if={assigns[:icon]}
        name={@icon}
        class="w-4 h-4 text-zinc-400 group-hover:text-primary-500 transition-colors duration-900 group-hover:transition-colors "
      />
      <div class="text-zinc-600 group-hover:text-zinc-800 transition-all">{@title}</div>
    </a>
    """
  end
end