import Image from "next/image";
import React from "react";
import UserPostCard from "../Shared/UserPostCard";
import PostEditor from "../Shared/PostEditor";
import { Button } from "@/components/ui/button";
import { Post } from "@/types/custom/user";
import { escapeMultipleStrings, formatPostTime } from "@/lib/utils";
import clsx from "clsx";
import { format } from "date-fns";
import PostActionBar from "../Shared/PostActionsBar";
import { headers, type UnsafeUnwrappedHeaders } from "next/headers";

const Status: React.FC<{ post: Post; posts: Post[] }> = ({ post, posts }) => {
  const images = post.images ? escapeMultipleStrings(post.images) : [];
  const token = (headers() as unknown as UnsafeUnwrappedHeaders).get("waalook-auth-header");

  if (!token) {
    return null;
  }

  return (
    <>
      <div className="bg-white px-4 border-b">
        <div className="flex-col py-4 space-y-2 w-full">
          <div className="flex items-start space-x-2 w-full">
            <Image
              height={500}
              width={500}
              src="/assets/images/interior.webp"
              alt="Profile"
              className="w-10 h-10 rounded-full"
            />
            <div className="flex items-start justify-between w-full space-x-4">
              <div>
                <h5 className="">Marcus Tukruma</h5>
                <span className="text-neutral-700 text-sm">
                  @{post.post_author} ·{" "}
                  {formatPostTime(new Date(post.post_date))}
                </span>
              </div>
              <Button
                className="rounded-full font-semibold bg-black"
                size={"sm"}
              >
                Follow
              </Button>
            </div>
          </div>
          <div className="">{post.post_content}</div>
          {images.length > 0 && (
            <div
              className={clsx(
                "grid gap-1",
                images.length === 1
                  ? "grid-cols-1 rounded-lg"
                  : images.length === 2
                  ? "grid-cols-2"
                  : images.length === 3
                  ? "grid-cols-2 "
                  : "grid-cols-2"
              )}
            >
              {images.map((imgSrc: string, index: number) => (
                <Image
                  key={index}
                  src={imgSrc}
                  alt={`Post image ${index + 1}`}
                  width={500}
                  height={500}
                  className={clsx(
                    "object-cover",
                    images.length === 1 && "rounded-lg",
                    images.length === 2 &&
                      (index === 0 ? "rounded-l-lg" : "rounded-r-lg"),
                    images.length === 3 &&
                      (index === 0
                        ? "rounded-l-lg h-full row-span-2"
                        : index === 1
                        ? "rounded-tr-lg"
                        : "rounded-br-lg"),
                    images.length === 4 &&
                      (index === 0
                        ? "rounded-tl-lg"
                        : index === 1
                        ? "rounded-tr-lg"
                        : index === 2
                        ? "rounded-bl-lg"
                        : "rounded-br-lg")
                  )}
                />
              ))}
            </div>
          )}
          <div className="flex space-x-1 text-neutral-700 py-2 items-center text-sm w-full">
            {format(new Date(post.post_date), "hh:mm a · MMM dd, yyyy")} ·
            307.4K Views
          </div>
          <div className="flex space-x-3 border-t py-4 border-y justify-between items-center w-full">
            <PostActionBar post={post} token={token} />
          </div>
        </div>
        <div className="py-4">
          <PostEditor
            placeHolderText="Post your reply"
            PostButtonText="Reply"
            token={token}
          />
        </div>
      </div>
      <div className="bg-white">
        {posts.map((post, i) => (
          <UserPostCard key={i} {...post} />
        ))}
      </div>
    </>
  );
};

export default Status;