defmodule OutlookWeb.TunitEditorComponent do

  use Phoenix.Component

  import OutlookWeb.CoreComponents
  # alias Phoenix.LiveView.JS

  defp statuses do
    [ {:untranslated, "bg-red-800 col-span-3 disabled:border-gray-600"},
      {:passable, "bg-amber-500 col-span-2 disabled:border-gray-600"},
      {:done, "bg-green-700 disabled:border-gray-600"} ]
  end

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

  def tunit_editor(assigns) do
    assigns = unless assigns.current_tunit do
      assigns
      |> assign(
        current_tunit: %Outlook.InternalTree.TranslationUnit{},
        disabled: true
      )
    else
      assigns |> assign(disabled: false)
    end
    ~H"""
      <div id="translation-unit-editor" phx-nohook="tunit_editor">
        <%!-- <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} disabled={@disabled}>
          <textarea name="content" class="h-48 rounded border-slate-500 resize-none"><%= @current_tunit.content %></textarea>
        </form>
      </div>
      <div class="grid grid-cols-scheise gap-3">
        <div :for={{status, class} <- statuses()}>
          <.status_button class={class} status={status} target={@target} disabled={@current_tunit.status == status}></.status_button>
        </div>
      </div>
    """
  end

  defp status_button(assigns) do
    ~H"""
      <.link  phx-click="tunit_status" phx-value-status={@status} phx-target={@target}>
        <.button class={@class} title="select translation status" disabled={@disabled}><%= @status |> to_string %></.button>
      </.link>
    """
  end
end