import {
  JSXElement,
  Show,
  createEffect,
  createSignal,
  splitProps,
} from "solid-js";

import { Post } from "../Util/api";
import CommentsButton from "./Buttons/CommentsButton";
import EngagementButton from "./Buttons/Engegament";
import RemovePostButton from "./Buttons/RemovePostButton";
import ReportButton from "./Buttons/Report";

export function PostSegment(props: { post: Post }): JSXElement {
  const [local] = splitProps(props, ["post"]);
  const [updatedAt, setUpdatedAt] = createSignal<string>("");
  const [createdAt, setCreatedAT] = createSignal<string>("");
  const [edited, setEdited] = createSignal<boolean>(false);

  createEffect((): void => {
    setUpdatedAt(new Date(local.post.createdAt).toDateString());
    setCreatedAT(new Date(local.post.updatedAt).toDateString());
    setEdited(!(updatedAt() === createdAt()));
  });

  return (
    <div class="card compact w-full flex-grow border-b-2 border-b-info bg-base-200 text-base-content transition-all hover:bg-base-300">
      <div class="card-body md:mx-6">
        <div class="flex flex-row justify-between">
          <p class="text-xs">{createdAt()}</p>
          <details class="dropdown">
            <summary class="btn btn-sm">...</summary>
            <ul class="w-26 menu dropdown-content z-[1] rounded-box bg-base-100 p-2 shadow">
              <li>
                <ReportButton />
              </li>
              <li>
                <RemovePostButton postId={local.post.id} />
              </li>
            </ul>
          </details>
        </div>
        <Show when={edited()}>
          <p>This post has been edited</p>
        </Show>
        <p class="my-1 text-base">{local.post.content}</p>
        <div class="card-actions justify-between">
          <div class="flex">
            <EngagementButton postId={local.post.id} />
            <CommentsButton postId={local.post.id} />
          </div>
        </div>
      </div>
    </div>
  );
}