defmodule OutlookWeb.TunitEditorComponent do

  use Phoenix.Component

  import OutlookWeb.CoreComponents

  attr :current_tunit, :any
  attr :target, :string

  def tunit_editor(assigns) do
    ~H"""
    <div id="translation-unit-editor" phx-no-hook="tunit_editor" phx-target={@target}>
      <%!-- <div class="h-48 p-2 border border-slate-500 rounded" contenteditable phx-no-change="update_current_tunit">
        <%= @current_tunit.content |> raw %>
      </div> --%>
      <form phx-change="update_current_tunit" phx-target={@target}>
        <textarea id="tunit-editor-content" name="content" class="h-96 rounded border-slate-500 resize-none bg-transparent w-full"
          disabled={!@current_tunit.status}><%= @current_tunit.content %></textarea>
      </form>
      <.status_selector target={@target} disabled={!@current_tunit.status} tunit={@current_tunit} />
    </div>
    """
  end

  defp statuses() do
    [ {:untranslated, "bg-red-800"},
      {:passable, "bg-amber-500/70"},
      {:done, "bg-green-700"} ]
  end

  defp status_selector(assigns) do
    ~H"""
    <form phx-change="tunit_status" phx-target={@target}>
      <div class="tunit-status flex justify-center">
        <.status_button :for={{status, class} <- statuses()} forstatus={status}
          status={@tunit.status} class={class} disabled={@disabled} />
      </div>
    </form>
    """
  end

  defp status_button(assigns) do
    ~H"""
    <input type="radio" name="status" id={@forstatus} value={@forstatus} class="hidden"
      disabled={@disabled} checked={@status == @forstatus}>
    <label for={@forstatus} title="change translation status"
      class={[@class, "p-2 px-4 mx-4 text-center opacity-30 rounded-lg"]}><%= @forstatus %></label>
    """
  end
end