defmodule SigmaKit.Components.DateSelectComponent do
  use Phoenix.LiveComponent
  use SigmaKit.Components

  def update(assigns, socket) do
    socket =
      assign(socket,
        id: assigns.id,
        date: assigns.date,
        view_date: assigns.date,
        target: assigns.target,
        open: false,
        day_count:
          Timex.diff(
            Timex.end_of_month(assigns.date),
            Timex.beginning_of_month(assigns.date),
            :days
          ),
        start_offset: Timex.weekday(Timex.beginning_of_month(assigns.date)) - 1
      )

    {:ok, socket}
  end

  def handle_event("view-date-change", %{"date" => date}, socket) do
    date = DateTime.from_iso8601(date) |> elem(1)
    socket = assign(socket, view_date: date)
    {:noreply, socket}
  end

  def handle_event("popover-hidden", _, socket) do
    {:noreply, assign(socket, open: false)}
  end

  def handle_event("popover-shown", _, socket) do
    {:noreply, assign(socket, open: true)}
  end

  def view_month(view_date) do
    Timex.beginning_of_month(view_date)
  end

  def render(assigns) do
    ~H"""
    <div>
      <.popover trigger_click placement="bottom" events open={@open}>
        <:trigger>
          <.button inline>
            <.icon name="hero-calendar" class="w-4 h-4 me-2 mb-1" />
            {Timex.format!(@date, "{0M}/{0D}/{YY}")}
          </.button>
        </:trigger>
        <div class="flex justify-between items-center text-xs mb-2">
          <button
            class="py-2 hover:bg-zinc-100 px-2"
            phx-click="view-date-change"
            phx-target={@myself}
            phx-value-date={Timex.shift(@view_date, months: -1)}
          >
            <.icon name="hero-chevron-left" class="w-4 h-4" />
          </button>
          <div class="text-center py-2 font-bold">
            {Timex.format!(@view_date, "{Mshort}, {YYYY}")}
          </div>
          <button
            class="py-2 hover:bg-zinc-100 px-2"
            phx-click="view-date-change"
            phx-target={@myself}
            phx-value-date={Timex.shift(@view_date, months: 1)}
          >
            <.icon name="hero-chevron-right" class="w-4 h-4" />
          </button>
        </div>
        <div class="grid grid-cols-7 text-xs text-center">
          <div class="w-6 bg-zinc-600 text-zinc-50 font-bold py-1">S</div>
          <div class="w-6 bg-zinc-600 text-zinc-50 font-bold py-1">M</div>
          <div class="w-6 bg-zinc-600 text-zinc-50 font-bold py-1">T</div>
          <div class="w-6 bg-zinc-600 text-zinc-50 font-bold py-1">W</div>
          <div class="w-6 bg-zinc-600 text-zinc-50 font-bold py-1">T</div>
          <div class="w-6 bg-zinc-600 text-zinc-50 font-bold py-1">F</div>
          <div class="w-6 bg-zinc-600 text-zinc-50 font-bold py-1">S</div>
          <div :for={_ <- 0..assigns.start_offset} class="w-6"></div>
          <div
            :for={d <- 0..assigns.day_count}
            phx-click="date-select"
            phx-target={@target}
            phx-value-id={@id}
            phx-value-date={DateTime.add(view_month(@view_date), d, :day)}
            class={[
              "w-6 py-1 cursor-pointer rounded-full",
              Timex.beginning_of_day(DateTime.add(Timex.beginning_of_month(@date), d, :day)) ==
                Timex.beginning_of_day(@date) && "bg-primary-600 text-white",
              Timex.beginning_of_day(DateTime.add(Timex.beginning_of_month(@date), d, :day)) !=
                Timex.beginning_of_day(@date) && "hover:bg-gray-200"
            ]}
          >
            {d + 1}
          </div>
        </div>
      </.popover>
    </div>
    """
  end
end