defmodule SigmaKit.Components.Containers do
  use Phoenix.LiveComponent

  attr :shadow, :boolean, default: true, doc: "When true uses a shadow for emphasis"
  attr :title, :string, default: nil, doc: "The title of the container"
  attr :class, :any, default: "", doc: "Additional classes to apply to the container"
  attr :fill, :boolean, default: false, doc: "When true the box will flex to the container"

  slot :action_bar, doc: "A slot for action buttons"
  slot :inner_block, doc: "The main content of the container"
  slot :footer, doc: "Content for a bottom section"

  def box(assigns) do
    ~H"""
    <div class={[
      "rounded-lg border",
      @shadow && "shadow-lg border-zinc-100",
      !@shadow && "border-zinc-200",
      @fill && "h-full w-full max-h-full max-w-full",
      @class
    ]}>
      <div :if={!Enum.empty?(@action_bar) || @title} class="flex justify-between my-2 h-8 px-4 mt-4">
        <div class="font-medium text-lg">
          {@title}
        </div>
        <div class="flex gap-4 justify-end">
          {render_slot(@action_bar)}
        </div>
      </div>
      <div class={["flex flex-col divide-y", @fill && "w-full h-full max-h-full max-w-full"]}>
        <div class="p-4 h-full w-full max-h-full max-w-full overflow-hidden">
          {render_slot(@inner_block)}
        </div>
        <div :if={@footer != []} class="p-4">
          {render_slot(@footer)}
        </div>
      </div>
    </div>
    """
  end

  attr :data, :any, required: true
  slot :inner_block

  def async_container(assigns) do
    ~H"""
    <.async_result :let={data} assign={@data}>
      <:loading>
        <div class="flex justify-center items-center p-8">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150" width="150px">
            <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>
      </:loading>
      <:failed :let={reason}>
        <div class="text-center text-red-500 font-bold py-8">{reason}</div>
      </:failed>
      {render_slot(@inner_block, data)}
    </.async_result>
    """
  end
end