defmodule OutlookWeb.HtmlTreeComponent do

   use Phoenix.Component
  # use OutlookWeb, :html
  import OutlookWeb.CoreComponents

  alias Phoenix.LiveView.JS

  attr :tree_items, :list, required: true

  def treeview(assigns) do
    ~H"""
      <div class="font-mono whitespace-nowrap">
      <%= for tree_item <- @tree_items do %>
        <%= case tree_item do %>
          <% %{node: %{type: :element}} = item -> %>
            <.tree_element node={item.node} level={item.level}></.tree_element>
          <% %{node: %{type: :text}} = item -> %>
            <.tree_text node={item.node} level={item.level}></.tree_text>
          <% %{node: %{type: :comment}} = item -> %>
            <.tree_comment node={item.node} level={item.level}></.tree_comment>
        <% end %>
      <% end %>
      </div>
      <.link  phx-click={JS.push("apply_modifier", value: %{modifier: :unwrap})}>
        <.button  title="unwraps selected elements">Unwrap</.button>
      </.link>
      <.link  phx-click={JS.push("partition_text", value: %{modifier: :unwrap})}>
        <.button  title="splits text into sentences">Partition</.button>
      </.link>
    """
  end

  def tree_element(assigns) do
    ~H"""
      <div nid={@node.nid} phx-click={JS.push("select", value: %{nid: @node.nid})}>
        <%= "#{String.duplicate("  ", @level)}<#{@node.name}>" %>
      </div>
    """
  end

  def tree_text(assigns) do
    ~H"""
      <div nid={@node.nid} phx-click={JS.push("select", value: %{nid: @node.nid})}>
        <%= "#{String.duplicate("  ", @level)}\"#{String.slice(@node.content, 0, 15)}...\"\n" %>
      </div>
    """
  end

  def tree_comment(assigns) do
    ~H"""
      <div nid={@node.nid} phx-click={JS.push("select", value: %{nid: @node.nid})} title={@node.content}>
        <%= "#{String.duplicate("  ", @level)}<!-- #{String.slice(@node.content, 0, 15)}...-->\n" %>
      </div>
    """
  end
end