defmodule ChirpWeb.PostLive.PostComponent do
    use ChirpWeb, :live_component

    @spec render(any) :: Phoenix.LiveView.Rendered.t()
    def render(assigns) do
      #IO.inspect(assigns.post.__meta__.state)
      ~H"""
      <div id={"post-#{assigns.post.id}"} class="container mx-auto"
      style={if @post.__meta__.state == :deleted, do: "display:none;", else: ""}
      >
      <div id={"postrow-for-#{assigns.post.id}"}  class="flex flex-row">

        <div class="basis-1/4">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
          <div label="Username"><%= @post.username %></div>

        </div>
        <div id={"post-maincolumn-#{assigns.post.id}"} class="basis-3/4">

        <div id={"post-cardbox-#{assigns.post.id}"} class="p-6 max-w-lg bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
        <pre id={"body-#{assigns.post.id}"} label="Body" class="mb-3 font-normal text-gray-500 dark:text-gray-400"><%= @post.body %></pre>
        <div id={"buttons-#{assigns.post.id}"} class="grid grid-flow-col gap-4 auto-cols-max">
          <div class="p-1">
            <.link navigate={~p"/posts/#{@post}"} class="inline-flex items-center text-blue-600 hover:underline">
            Show
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="p-1 w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
            </.link>
          </div>

          <div id={"likes-col-#{assigns.post.id}"} class="p-1 flex flex-row">
            <.link phx-click="like" phx-value-id={@post.id} phx-target={@myself}>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
            </svg>
            </.link>
            <span id={"likes-count-#{assigns.post.id}"} label="Likes count">
              <%= @post.likes_count %>
            </span>
          </div>

          <div  class="p-1 flex flex-row">
            <.link phx-click="repost" phx-value-id={@post.id} phx-target={@myself}>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" />
            </svg>
            </.link>
            <div label="Reposts countt">
              <%= @post.reposts_count %>
            </div>
          </div>
          <div  class="p-1">
            <.link patch={~p"/posts/#{@post}/edit"}>Edit</.link>
          </div>
          <div class="p-1">
            <.link phx-click={JS.push("delete", value: %{id: @post.id})} phx-target={@myself} data-confirm="Are you sure?">
              Delete
            </.link>
          </div>
          <div class="p-1">
          <!-- 🗑: <%= if @post.__meta__.state == :deleted, do: "Yes", else: "No" %> -->
          </div>
        </div>



      </div>






        </div>
      </div>
      </div>
      """
    end


    def handle_event("like", _, socket) do
      Chirp.Timeline.inc_likes(socket.assigns.post)
      {:noreply,socket}
    end
    def handle_event("repost", _, socket) do
      Chirp.Timeline.inc_reposts(socket.assigns.post)
      {:noreply,socket}
    end
    def handle_event("delete", %{"id" => id}, socket) do
      post = Chirp.Timeline.get_post!(id)
      {:ok, _} = Chirp.Timeline.delete_post(post)

      {:noreply, socket}
    end

end