"use client";

import { Fragment, useEffect, useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTrigger,
} from "../ui/dialog";
import { getDataApprovalHistory } from "@/service/curated-content/curated-content";
import { ChevronRightIcon } from "lucide-react";

export default function ApprovalHistoryModal(props: { id: number }) {
  const { id } = props;
  const [history, setHistory] = useState<any>([]);

  useEffect(() => {
    getApprovalHistory();
  }, []);

  const getApprovalHistory = async () => {
    const res = await getDataApprovalHistory(id);
    console.log("res hstro", res?.data?.data);
    if (res?.data?.data) {
      setHistory(res?.data?.data);
    }
  };
  return (
    <Dialog>
      <DialogTrigger>
        <a className="mt-2 hover:underline text-primary">
          Lihat Riwayat Approval
        </a>
      </DialogTrigger>
      <DialogContent size="md" className="px-1 lg:px-4">
        <div className="grid grid-cols-2 md:grid-cols-6 font-light text-sm">
          <div className="col-span-2 flex justify-center">
            <p className="px-12 py-4 rounded-full bg-cyan-200 ">Upload</p>
          </div>
          <div className="col-span-2 col-start-1 flex justify-center">
            <p className="border-l-2 border-black h-8"></p>
          </div>
          {history?.length &&
            history?.map((list: any, index: number) => (
              <Fragment key={list.id}>
                {" "}
                <div
                  className={`col-span-2 col-start-1  p-4 rounded-lg flex flex-col gap1 ${
                    list.status.id == 2
                      ? "bg-cyan-500"
                      : list.status.id == 4
                      ? "bg-red-500"
                      : "bg-yellow-500"
                  }`}
                >
                  <p className="text-white font-semibold mb-2">
                    {list.status.name}
                  </p>
                  <div
                    className={`w-full rounded-lg flex flex-col p-4 ${
                      list.status.id == 2
                        ? "bg-cyan-200"
                        : list.status.id == 4
                        ? "bg-red-50"
                        : "bg-yellow-100"
                    }`}
                  >
                    <p>Level: {list.levelNumber}</p>
                    <p>Direview oleh: {list.approvalBy.fullname}</p>
                  </div>
                </div>
                <div className="col-span-1 hidden md:flex justify-center items-center">
                  <ChevronRightIcon />
                </div>
                <div className="col-span-3 flex items-center mt-2 md:mt-0">
                  <div
                    className={`flex flex-col p-4 w-full rounded-lg ${
                      list.status.id == 2
                        ? "bg-cyan-200"
                        : list.status.id == 4
                        ? "bg-red-50"
                        : "bg-yellow-100"
                    }`}
                  >
                    <p>Catatan :</p>
                    <p>{list.message}</p>
                  </div>
                </div>
                {index !== history.length - 1 && (
                  <div className="col-span-2 col-start-1 flex justify-center">
                    <p className="border-l-2 border-black h-8"></p>
                  </div>
                )}
              </Fragment>
            ))}
          {history.length > 0 && history[history.length - 1].status.id == 2 && (
            <>
              <div className="col-span-2 col-start-1 flex justify-center">
                <p className="border-l-2 border-black h-8"></p>
              </div>
              <div className="col-span-2 col-start-1 flex justify-center">
                <p className="px-12 py-4 rounded-full bg-green-300 ">Publish</p>
              </div>
            </>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}