sigma_kit

defmodule SigmaKit.Components.Flair do
  use Phoenix.LiveComponent

  attr :success, :boolean, default: false
  attr :primary, :boolean, default: false
  attr :secondary, :boolean, default: false
  attr :danger, :boolean, default: false
  attr :warning, :boolean, default: false
  attr :info, :boolean, default: false
  attr :label, :string, default: nil

  def indicator(assigns = %{primary: true}) when assigns.label != nil do
    ~H"""
    <span class="inline-flex items-center bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
      <span class="w-2 h-2 me-1 bg-primary-500 rounded-full"></span> {@label}
    </span>
    """
  end

  def indicator(assigns = %{secondary: true}) when assigns.label != nil do
    ~H"""
    <span class="inline-flex items-center bg-secondary-100 text-secondary-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
      <span class="w-2 h-2 me-1 bg-secondary-500 rounded-full"></span> {@label}
    </span>
    """
  end

  def indicator(assigns = %{success: true}) when assigns.label != nil do
    ~H"""
    <span class="inline-flex items-center bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
      <span class="w-2 h-2 me-1 bg-green-500 rounded-full"></span> {@label}
    </span>
    """
  end

  def indicator(assigns = %{danger: true}) when assigns.label != nil do
    ~H"""
    <span class="inline-flex items-center bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
      <span class="w-2 h-2 me-1 bg-red-500 rounded-full"></span> {@label}
    </span>
    """
  end

  def indicator(assigns = %{info: true}) when assigns.label != nil do
    ~H"""
    <span class="inline-flex items-center bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
      <span class="w-2 h-2 me-1 bg-blue-500 rounded-full"></span> {@label}
    </span>
    """
  end

  def indicator(assigns = %{warning: true}) when assigns.label != nil do
    ~H"""
    <span class="inline-flex items-center bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
      <span class="w-2 h-2 me-1 bg-yellow-500 rounded-full"></span> {@label}
    </span>
    """
  end

  def indicator(assigns) when assigns.label != nil do
    ~H"""
    <span class="inline-flex items-center bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
      <span class="w-2 h-2 me-1 bg-gray-500 rounded-full"></span> {@label}
    </span>
    """
  end

  def indicator(assigns = %{success: true}) when assigns.label == nil do
    ~H"""
    <span class="flex w-3 h-3 me-3 bg-green-500 rounded-full"></span>
    """
  end

  def indicator(assigns = %{danger: true}) when assigns.label == nil do
    ~H"""
    <span class="flex w-3 h-3 me-3 bg-red-500 rounded-full"></span>
    """
  end

  def indicator(assigns = %{info: true}) when assigns.label == nil do
    ~H"""
    <span class="flex w-3 h-3 me-3 bg-blue-600 rounded-full"></span>
    """
  end

  def indicator(assigns = %{warning: true}) when assigns.label == nil do
    ~H"""
    <span class="flex w-3 h-3 me-3 bg-yellow-300 rounded-full"></span>
    """
  end

  def indicator(assigns = %{primary: true}) when assigns.label == nil do
    ~H"""
    <span class="flex w-3 h-3 me-3 bg-primary-500 rounded-full"></span>
    """
  end

  def indicator(assigns = %{secondary: true}) when assigns.label == nil do
    ~H"""
    <span class="flex w-3 h-3 me-3 bg-secondary-500 rounded-full"></span>
    """
  end

  def indicator(assigns = %{warning: true}) when assigns.label == nil do
    ~H"""
    <span class="flex w-3 h-3 me-3 bg-yellow-300 rounded-full"></span>
    """
  end

  def indicator(assigns) do
    ~H"""
    <span class="flex w-3 h-3 me-3 bg-gray-200 rounded-full"></span>
    """
  end

  attr :loader, :string, default: "medium"
  attr :loading, :boolean, default: true
  slot :inner_block

  def loader(assigns) do
    ~H"""
    <.loader_glyph :if={@loading} loader={@loader} />
    {if !@loading, do: render_slot(@inner_block)}
    """
  end

  attr :loader, :string, default: "medium"

  defp loader_glyph(%{loader: "none"} = assigns) do
    ~H"""
    <div></div>
    """
  end

  defp loader_glyph(%{loader: "medium"} = assigns) do
    ~H"""
    <div class="flex justify-center items-center p-8">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 300 150"
        width="150px"
        height="100px"
      >
        <path
          fill="none"
          stroke="#D004FF"
          stroke-width="15"
          stroke-linecap="round"
          stroke-dasharray="300 385"
          stroke-dashoffset="0"
          d="M275 75c0 31-27 50-50 50-58 0-92-100-150-100-28 0-50 22-50 50s23 50 50 50c58 0 92-100 150-100 24 0 50 19 50 50Z"
        >
          <animate
            attributeName="stroke-dashoffset"
            calcMode="spline"
            dur="2"
            values="685;-685"
            keySplines="0 0 1 1"
            repeatCount="indefinite"
          >
          </animate>
        </path>
      </svg>
    </div>
    """
  end

  defp loader_glyph(%{loader: "inline"} = assigns) do
    ~H"""
    <div class="inline px-2">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="2em" class="inline">
        <rect fill="#D004FF" stroke="#D004FF" stroke-width="15" width="30" height="30" x="25" y="85">
          <animate
            attributeName="opacity"
            calcMode="spline"
            dur="2"
            values="1;0;1;"
            keySplines=".5 0 .5 1;.5 0 .5 1"
            repeatCount="indefinite"
            begin="-.4"
          >
          </animate>
        </rect>
        <rect fill="#D004FF" stroke="#D004FF" stroke-width="15" width="30" height="30" x="85" y="85">
          <animate
            attributeName="opacity"
            calcMode="spline"
            dur="2"
            values="1;0;1;"
            keySplines=".5 0 .5 1;.5 0 .5 1"
            repeatCount="indefinite"
            begin="-.2"
          >
          </animate>
        </rect>
        <rect fill="#D004FF" stroke="#D004FF" stroke-width="15" width="30" height="30" x="145" y="85">
          <animate
            attributeName="opacity"
            calcMode="spline"
            dur="2"
            values="1;0;1;"
            keySplines=".5 0 .5 1;.5 0 .5 1"
            repeatCount="indefinite"
            begin="0"
          >
          </animate>
        </rect>
      </svg>
    </div>
    """
  end
end