defmodule TailwindLiveComponents.RadioGroup do
  use Phoenix.Component

  alias Phoenix.LiveView.JS
  alias TailwindLiveComponents.Label

  @doc """
  Renders the vertical radio group element

  ```
  <.radio_group form={f} field={:fruit} label="Horizontal Radio Group" options={[
    %{value: "apple", display: "Apple", detail: "yummy apple"},
    %{value: "banana", display: "Banana", detail: "yummy banana"},
    %{value: "cherry", display: "Cherry", detail: "yummy cherry"}
  ]} />
  ```

  ## Options

    * `form` - The form identifier
    * `field` - The field name
    * `label` - The text for the generated `<label>` element
    * `required` - Optional flag idicating field is required
    * `value` - The current value for the input
    * `orientation` - "vertical" or "horizontal" (default is "vertical")
    * `prompt` - An option to include at the top of the options with the given prompt text
    * `options` - The options in the list box
    * `error` - Optional error message
    * `theme` - Optional theme to use for Tailwind classes
  """
  def radio_group(assigns) do
    input_id = Phoenix.HTML.Form.input_id(assigns.form, assigns.field)
    label_id = input_id <> "-label"
    options = Map.get(assigns, :options, [])

    assigns =
      assigns
      |> assign(:options, options)
      |> assign_new(:input_id, fn -> input_id end)
      |> assign_new(:label_id, fn -> label_id end)
      |> assign_new(:label, fn -> nil end)
      |> assign_new(:required, fn -> false end)
      |> assign_new(:value, fn -> nil end)
      |> assign_new(:error, fn -> nil end)
      |> assign_new(:theme, fn -> %TailwindLiveComponents.Theme{} end)
      |> assign_new(:orientation, fn -> "vertical" end)

    ~H"""
    <div
      id={@input_id <> "-container"}
      phx-hook="tlcRadioGroup"
      role="radiogroup"
      aria-labelledby={@label_id}
    >
      <%= Phoenix.HTML.Form.hidden_input(
        @form,
        @field,
        id: @input_id,
        value: @value,
        "data-tlc-ref": "valueInput"
      ) %>

      <Label.label
        form={@form}
        field={@field}
        theme={@theme}
        label={@label}
        required={@required}
        input_id={@input_id}
        label_id={@label_id}
        error={@error}
      />

      <%= if @orientation == "horizontal" do %>
        <div
          class={"mt-1 grid grid-cols-1 gap-y-2 #{grid_columns(@options)} sm:gap-x-2"}
          role="none"
          data-tlc-ref="radiogroup"
        >
          <%= for {option, index} <- Enum.with_index(@options) do %>
            <.horizontal_radio_option
              option={option}
              selected={option.value == @value}
              option_id={"#{@input_id}-option-#{index}"}
              theme={@theme}
            />
          <% end %>
        </div>
      <% else %>
        <div
          class="mt-1 space-y-2"
          role="none"
          data-tlc-ref="radiogroup"
        >
          <%= for {option, index} <- Enum.with_index(@options) do %>
            <.vertical_radio_option
              option={option}
              selected={option.value == @value}
              option_id={"#{@input_id}-option-#{index}"}
              theme={@theme}
            />
          <% end %>
        </div>
      <% end %>
    </div>
    """
  end

  defp vertical_radio_option(assigns) do
    assigns =
      assigns
      |> assign_new(:option_label_id, fn -> assigns.option_id <> "-label" end)
      |> assign_new(:option_description_id, fn -> assigns.option_id <> "-description" end)
      |> assign_new(:option_value, fn -> Map.get(assigns.option, :value) end)
      |> assign_new(:option_display, fn -> Map.get(assigns.option, :display) end)
      |> assign_new(:option_detail, fn -> Map.get(assigns.option, :detail) end)
      |> assign_new(:option_icon, fn -> Map.get(assigns.option, :icon) end)

    ~H"""
    <div
      id={@option_id}
      role="radio"
      aria-checked={@selected}
      tabindex="0"
      aria-labelledby={@option_label_id}
      aria-describedby={@option_description_id}
      data-value={@option_value}
      class={"relative flex px-5 py-4 rounded-lg shadow-sm cursor-pointer focus:outline-none border focus:ring-1 #{@theme.focus_ring_color} #{@theme.focus_border_color} focus:shadow-md"}
      data-radiogroup-option-selected={radiogroup_option_color_selected(@theme)}
      data-radiogroup-option-not-selected={radiogroup_option_color_not_selected(@theme)}
    >
      <div class="flex items-center justify-between w-full">
        <div class="flex items-center">
          <%= if @option_icon do %>
            <div
              class="flex-shrink-0 inline-flex pr-4"
              data-radiogroup-option-selected={radiogroup_option_display_selected(@theme)}
              data-radiogroup-option-not-selected={radiogroup_option_display_not_selected(@theme)}
            >
              <img class="h-8 w-8" src={@option_icon} alt={@option_display}>
            </div>
          <% end %>

          <div class="text-md">
            <p
              id={@option_label_id}
              class="font-medium"
              data-radiogroup-option-selected={radiogroup_option_display_selected(@theme)}
              data-radiogroup-option-not-selected={radiogroup_option_display_not_selected(@theme)}
            >
              <%= @option_display %>
            </p>
            <%= if @option_detail do %>
              <span
                id={@option_description_id}
                class="inline text-sm"
                data-radiogroup-option-selected={radiogroup_option_display_selected(@theme)}
                data-radiogroup-option-not-selected={radiogroup_option_display_not_selected(@theme)}
              >
                <span><%= @option_detail %></span>
              </span>
            <% end %>
          </div>
        </div>
        <div
          class={"flex-shrink-0 #{@theme.selected_text_color}"}
          data-radiogroup-option-selected={radiogroup_option_check_selected()}
          data-radiogroup-option-not-selected={radiogroup_option_check_not_selected()}
        >
          <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="12" fill="#fff" fill-opacity="0.2"></circle>
            <path d="M7 13l3 3 7-7" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
      </div>
    </div>
    """
  end

  defp horizontal_radio_option(assigns) do
    assigns =
      assigns
      |> assign_new(:option_label_id, fn -> assigns.option_id <> "-label" end)
      |> assign_new(:option_description_id, fn -> assigns.option_id <> "-description" end)
      |> assign_new(:option_value, fn -> Map.get(assigns.option, :value) end)
      |> assign_new(:option_display, fn -> Map.get(assigns.option, :display) end)
      |> assign_new(:option_detail, fn -> Map.get(assigns.option, :detail) end)
      |> assign_new(:option_icon, fn -> Map.get(assigns.option, :icon) end)

    ~H"""
    <div
      id={@option_id}
      role="radio"
      aria-checked={@selected}
      tabindex="0"
      aria-labelledby={@option_label_id}
      aria-describedby={@option_description_id}
      data-value={@option_value}
      class={"relative flex px-5 py-4 rounded-lg shadow-sm cursor-pointer focus:outline-none border focus:ring-1 #{@theme.focus_ring_color} #{@theme.focus_border_color} focus:shadow-md"}
      data-radiogroup-option-selected={radiogroup_option_color_selected(@theme)}
      data-radiogroup-option-not-selected={radiogroup_option_color_not_selected(@theme)}
    >
      <div class="flex justify-between w-full">
        <div class="flex-1 flex justify-center">
          <div class="flex flex-col items-center">
            <%= if @option_icon do %>
              <div
                data-radiogroup-option-selected={radiogroup_option_display_selected(@theme)}
                data-radiogroup-option-not-selected={radiogroup_option_display_not_selected(@theme)}
              >
                <img class="h-10 max-w-10" src={@option_icon} alt={@option_display}>
              </div>
            <% end %>
            <span
              id={@option_label_id}
              class="font-medium text-md"
              data-radiogroup-option-selected={radiogroup_option_display_selected(@theme)}
              data-radiogroup-option-not-selected={radiogroup_option_display_not_selected(@theme)}
            >
              <%= @option_display %>
            </span>
            <%= if @option_detail do %>
              <span
                id={@option_description_id}
                class="inline text-sm"
                data-radiogroup-option-selected={radiogroup_option_detail_selected(@theme)}
                data-radiogroup-option-not-selected={radiogroup_option_detail_not_selected(@theme)}
              >
                <span><%= @option_detail %></span>
              </span>
            <% end %>
          </div>
        </div>
      </div>
    </div>
    """
  end

  defp grid_columns(options) do
    case length(options) do
      0 -> "sm:grid-cols-1"
      1 -> "sm:grid-cols-1"
      2 -> "sm:grid-cols-2"
      3 -> "sm:grid-cols-3"
      4 -> "sm:grid-cols-4"
      5 -> "sm:grid-cols-5"
      6 -> "sm:grid-cols-6"
      7 -> "sm:grid-cols-7"
      8 -> "sm:grid-cols-8"
      9 -> "sm:grid-cols-9"
      10 -> "sm:grid-cols-10"
      11 -> "sm:grid-cols-11"
      12 -> "sm:grid-cols-12"
      _ -> "sm:grid-cols-12"
    end
  end

  defp radiogroup_option_color_selected(js \\ %JS{}, theme) do
    js
    |> JS.remove_class("#{theme.bg_color} #{theme.border_color}")
    |> JS.add_class("#{theme.selected_bg_color} #{theme.focus_selected_shadow_color} #{theme.selected_border_color}")
  end

  defp radiogroup_option_color_not_selected(js \\ %JS{}, theme) do
    js
    |> JS.remove_class("#{theme.selected_bg_color} #{theme.focus_selected_shadow_color} #{theme.selected_border_color}")
    |> JS.add_class("#{theme.bg_color} #{theme.border_color}")
  end

  defp radiogroup_option_display_selected(js \\ %JS{}, theme) do
    js
    |> JS.remove_class(theme.text_color)
    |> JS.add_class(theme.selected_text_color)
  end

  defp radiogroup_option_display_not_selected(js \\ %JS{}, theme) do
    js
    |> JS.remove_class(theme.selected_text_color)
    |> JS.add_class(theme.text_color)
  end

  defp radiogroup_option_detail_selected(js \\ %JS{}, theme) do
    js
    |> JS.remove_class(theme.light_text_color)
    |> JS.add_class(theme.selected_light_text_color)
  end

  defp radiogroup_option_detail_not_selected(js \\ %JS{}, theme) do
    js
    |> JS.remove_class(theme.selected_light_text_color)
    |> JS.add_class(theme.light_text_color)
  end

  defp radiogroup_option_check_selected(js \\ %JS{}) do
    JS.remove_class(js, "invisible")
  end

  defp radiogroup_option_check_not_selected(js \\ %JS{}) do
    JS.add_class(js, "invisible")
  end
end