defmodule FriendsWeb.FriendsLive.Components do
  use FriendsWeb, :live_component
  use Phoenix.HTML
  import Helpers
  alias Friends.Friend
  alias FriendsWeb.Components.{Autocomplete, Map}
  alias Phoenix.LiveView.JS

  def header(assigns) do
    ~H"""
    <div class="border-b-4 flex flex-row justify-between">
      <h1 class="mb-0 pl-2" style="height:48px; text-indent:5px"><%= @friend.name %></h1>
    </div>
    """
  end

  def menu(assigns) do
    ~H"""
    <div class="hidden sm:tabs sm:mb-8">
      <%= for page <- [:overview, :timeline, :relationships] do %>
      <% is_active = if(page == @live_action) do "tab-active" end %>
      <.link patch={Routes.friends_show_path(FriendsWeb.Endpoint, page, @friend.slug)} class={"font-bold sm:tab-lg flex-grow no-underline tab tab-lifted #{is_active}"}>
      <%= page |> to_string |> :string.titlecase() %>
      </.link>
      <% end %>
    </div>
    """
  end

  @spec edit_menu(any) :: Phoenix.LiveView.Rendered.t()
  def edit_menu(assigns) do
    if assigns.live_action == :welcome,
      do: "",
      else: ~H"""
          <div class="hidden sm:tabs sm:mb-8">
        <%= for page <- [:overview, :timeline, :relationships] do %>
        <% is_active = if(page == @live_action) do "tab-active" end %>
        <.link patch={Routes.friends_edit_path(FriendsWeb.Endpoint, page, @friend.slug)} class={"font-bold sm:tab-lg flex-grow no-underline tab tab-lifted #{is_active}"}>
        <%= page |> to_string |> :string.titlecase() %>
        </.link>
        <% end %>
      </div>
      """
  end

  def show_page(:main, assigns), do: show_page(:overview, %{assigns | live_action: :overview})

  def show_page(:overview, assigns) do
    ~H"""
                  <Map.show address_latlon={@latlon} />
        <ul class="py-4 pl-0 md:text-xl h-1/2">
          <li class="flex flex-row mb-8 gap-6">
              <strong class="w-28 text-right">Nickname:</strong>
              <div class="">
                <%= if is_nil(@friend.nickname) do %>
                <span class="italic">none</span>
                <% else %>
                <%= @friend.nickname %>
                <% end %>
              </div>
          </li>
          <li class="flex flex-row mb-8 gap-6">
              <strong class="w-28 text-right">Birthday:</strong>
              <div class=""><%= @friend.born |> Calendar.strftime("%B %d, %Y") %>
              <br class="md:hidden"/>
              <span class="font-light">(<%= @friend |> Friend.age %> years old)</span>
              </div>
          </li>
          <li class="flex flex-row mb-8 gap-6">
              <strong class="w-28 text-right">Email:</strong>
              <div class=""><%= @friend.email %></div>
          </li>
          <li class="flex flex-row mb-8 gap-6">
              <strong class="w-28 text-right">Phone:</strong>
              <div class=""><%= @friend.phone %></div>
          </li>
          <li class="flex flex-row mb-8 gap-6">
              <strong class="w-28 text-right">Address:</strong>
              <div class=""><%= @address %></div>
              <input type="hidden" autocomplete="latlon" value={@latlon}/>
          </li>
        </ul>
    """
  end

  def show_page(:timeline, assigns) do
    ~H"""
    <div id="timeline" class="flex md:flex-row flex-col gap-8 p-8">
      <%= for event <- @friend |> Friends.Friend.get_events do %>
        <ul>
          <li>
            <%= event.name %>
          </li>
        </ul>
      <% end %>
      <%= if @friend |> Friends.Friend.get_events |> Enum.empty? do %>
        <div class="italic">None yet.</div>
      <% end %>
    </div>
    """
  end

  def show_page(:relationships, assigns) do
    ~H"""
    <div id="relationships" class="flex md:flex-row flex-col gap-8">
      <%= for relation <- @friend |> relations do %>
      <% relationship = relation(@friend, relation) %>
      <div id={"relation-#{relation.id}"} class="card card-compact w-96 bg-base-100 shadow-xl">
      <figure><img src="https://placeimg.com/400/225/people" alt={relation.id} /></figure>
      <div class="card-body">
        <h3 class="card-title">
          <%= relation.name %>
          <%= if relationship |> Friends.Relationship.get_relation do %>
            <div class={"badge badge-#{relationship |> Friends.Relationship.get_color}"}><%= relationship |> Friends.Relationship.get_relation %></div>
          <% end %>
        </h3>
        <p>If a dog chews shoes whose shoes does he choose?</p>
      </div>
      </div>
      <% end %>
      <%= if @friend |> relations |> Enum.empty? do %>
        <div class="italic p-4">No relationships on record yet.</div>
      <% end %>
    </div>
    """
  end

  ###
  def edit_page(:welcome, assigns) do
    top = ~H"""
    <h1>Welcome!</h1>
    <p>Before we get started, we just need some basic info about you:</p>
    <%= edit_page(:overview, assigns) %>
    """
  end

  def edit_page(:overview, assigns) do
    ~H"""
    <.form
        for={@changeset}
        let={f}
        action={@action}
        phx_change= "validate"
        phx_submit= "save"
        >
        <%= hidden_input f, :id, value: @friend.id %>
        <div class="border-b-4 flex flex-row">
          <%= text_input f, :name, placeholder: "Full Name",
            class: "m-0 p-0 pb-2 pl-2 input input-bordered border-dashed",
            style: "color: var(--tw-prose-headings);
            font-weight: 800;
            font-size: 2.25em;
            min-width: 50%;
            text-indent: 4px;
            line-height: 1.1111111;",
            value: @friend.name,
            phx_debounce: :blur %>
          <div class="min-w-fit flex place-items-center mx-4"><%= error_tag f, :name %></div>
        </div>

    <%= if @address_latlon do %>
          <Map.show address_latlon={@address_latlon} />
      <% end %>
        <ul class="py-4 pl-0 h-1/2">
        <li class="flex flex-row gap-x-6">
              <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Email:</strong>
              <div class="flex flex-col h-16">
                <%= text_input f, :email, class: "input input-primary input-sm md:input-md input-disabled", phx_debounce: "blur", value: @current_user.email %>
                <div class="min-w-fit flex place-items-center mr-4"><%= error_tag f, :email %></div>
              </div>
          </li>
        <%= if @live_action != :welcome do %>
          <li class="flex flex-row gap-x-6 h-16">
              <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Nickname:</strong>
              <div class=""><%= text_input f, :nickname, class: "input input-primary input-sm md:input-md", phx_debounce: "blur", value: @friend.nickname %></div>
          </li>
          <% end %>
          <li class="flex flex-row gap-x-6">
              <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Birthday:</strong>
              <div class="flex flex-col h-16">
                <%= date_input f, :born, class: "input input-primary input-sm md:input-md", phx_debounce: "blur", value: @friend.born %>
                <div class="min-w-fit flex place-items-center mr-4"><%= error_tag f, :born %></div>
              </div>
          </li>
          <li class="flex flex-row gap-x-6">
              <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Phone:</strong>
              <div class="flex flex-col h-16">
                <%= text_input f, :phone, class: "input input-primary input-sm md:input-md", phx_debounce: "blur", value: @friend.phone %>
                <div class="min-w-fit flex place-items-center mr-4"><%= error_tag f, :phone %></div>
              </div>
          </li>
          <li class="flex flex-row gap-x-6 relative">
              <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Address:</strong>
                <div class="flex flex-col h-16">
                <%= text_input f, :address_query, value: @address_query,
                class: "input input-primary input-sm md:input-md",
                phx_debounce: "500",
                phx_change: :address_search,
                phx_click: JS.show(to: "#search-results"),
                phx_blur: JS.hide(to: "#search-results"),
                autocomplete: "name" %>
                <%= hidden_input f, :address_latlon, value: @address_latlon,
                id: "address-latlon", autocomplete: "latlon",
                phx_change: "validate"
                 %>
              </div>
              <Autocomplete.search_results search_results={@search_results}/>
          </li>
        </ul>
        <div class="form-control flex flex-row gap-x-4 md:justify-end mb-4 md:w-1/2">
        <%= if @live_action != :welcome do %>
            <div class="flex-1">
              <.link patch={Routes.friends_show_path(FriendsWeb.Endpoint, :overview, @friend.slug)} class="btn btn-block btn-outline">back</.link>
            </div>
            <% end %>
          <div class="flex-1">
            <%= if @changeset.valid? do %>
              <%= submit "Save", phx_disable_with: "Saving...", class: "btn btn-block" %>
            <% else %>
              <%= submit "Save", class: "btn btn-block btn-disabled" %>
            <% end %>
          </div>
          <%= if @current_user.profile.id == @friend.id do %>
            <div class="flex-1">
              <.link href={Routes.user_settings_path(FriendsWeb.Endpoint, :edit)} class="btn btn-block btn-error">Delete</.link>
            </div>
          <% end %>
        </div>
      </.form>
    """
  end

  def edit_page(:relationships, assigns) do
    ~H"""
    """
  end

  def edit_page(:timeline, assigns) do
    ~H"""
    """
  end
end