"use client";
import { ColumnDef } from "@tanstack/react-table";
import {
  Eye,
  MoreVertical,
  MoveDownRight,
  SquarePen,
  Trash2,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { format } from "date-fns";
import { Link } from "@/components/navigation";
import { useTranslations } from "next-intl";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";

const useTableColumns = () => {
  const t = useTranslations("Table"); // Panggil di dalam hook
  const MySwal = withReactContent(Swal);
  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
      header: t("no"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
            <h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
              {row.getValue("no")}
            </h4>
          </div>
        </div>
      ),
    },
    {
      accessorKey: "contentTitle",
      header: t("title"),
      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
        const title: string = row.getValue("contentTitle");
        return (
          <span className="whitespace-nowrap">
            {title.length > 50 ? `${title.slice(0, 30)}...` : title}
          </span>
        );
      },
    },
    {
      accessorKey: "contentTag",
      header: t("tag"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("contentTag")}</span>
      ),
    },

    {
      accessorKey: "contentType",
      header: t("type-content"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("contentType")}</span>
      ),
    },
    {
      accessorKey: "contentCreatedGroupBy",
      header: t("source"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">
          {row.getValue("contentCreatedGroupBy")}
        </span>
      ),
    },

    {
      accessorKey: "isPublish",
      header: "Status",
      cell: ({ row }) => {
        const isPublish = row.getValue<boolean>("isPublish");
        return (
          <div>
            <Button
              size="sm"
              color={isPublish ? "success" : "warning"}
              variant="outline"
              className={`btn btn-sm ${
                isPublish ? "btn-outline-success" : "btn-outline-warning"
              } pill-btn ml-1`}
            >
              {isPublish ? "Diterima" : "Menunggu Review"}
            </Button>
          </div>
        );
      },
    },

    {
      accessorKey: "contentCreatedDate",
      header: t("upload-date"),
      cell: ({ row }) => {
        const createdAt = row.getValue("contentCreatedDate") as
          | string
          | number
          | undefined;

        const formattedDate =
          createdAt && !isNaN(new Date(createdAt).getTime())
            ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
            : "-";
        return <span className="whitespace-nowrap">{formattedDate}</span>;
      },
    },
    {
      id: "actions",
      accessorKey: "action",
      header: "Actions",
      enableHiding: false,
      cell: ({ row }) => {
        const isDisabled = row.original.isPublish; // Check the isPublish value

        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild disabled={isDisabled}>
              <Button
                size="icon"
                className={`bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent ${
                  isDisabled ? "cursor-not-allowed opacity-50" : ""
                }`}
                disabled={isDisabled} // Disable button if isPublish is true
              >
                <span className="sr-only">Open menu</span>
                <MoreVertical className="h-4 w-4 text-default-800" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="p-0" align="end">
              <Link
                href={`/contributor/content/spit/convert/${row.original.contentId}`}
              >
                <DropdownMenuItem
                  className={`p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none ${
                    isDisabled ? "cursor-not-allowed opacity-50" : ""
                  }`}
                  disabled={isDisabled} // Disable dropdown item if isPublish is true
                >
                  <MoveDownRight className="w-4 h-4 me-1.5" />
                  Pindah Ke Mediahub
                </DropdownMenuItem>
              </Link>
            </DropdownMenuContent>
          </DropdownMenu>
        );
      },
    },
  ];

  return columns;
};

export default useTableColumns;