mediahub-fe/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx

"use client";
import { ColumnDef } from "@tanstack/react-table";
import {
  Eye,
  MoreVertical,
  MoveDownRight,
  SquarePen,
  Trash2,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
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";
import { useState } from "react";

const useTableColumns = () => {
  const t = useTranslations("Table");
  const MySwal = withReactContent(Swal);

  const columns: ColumnDef<any>[] = [
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={
            table.getIsAllPageRowsSelected() ||
            (table.getIsSomePageRowsSelected() && "indeterminate")
          }
          onCheckedChange={(val) => table.toggleAllPageRowsSelected(!!val)}
          aria-label="Pilih semua pada halaman ini"
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(val) => row.toggleSelected(!!val)}
          aria-label="Pilih baris"
        />
      ),
      enableSorting: false,
      enableHiding: false,
    },
    {
      accessorKey: "no",
      header: t("no", { defaultValue: "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", { defaultValue: "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", { defaultValue: "Tag" }),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("contentTag")}</span>
      ),
    },
    {
      accessorKey: "contentType",
      header: t("type-content", { defaultValue: "Type Content" }),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("contentType")}</span>
      ),
    },
    {
      accessorKey: "contentCreatedGroupBy",
      header: t("source", { defaultValue: "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", { defaultValue: "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;
        const [open, setOpen] = useState(false);

        const handleClick = (e: React.MouseEvent) => {
          if (e.ctrlKey) {
            console.log("Ctrl + Click detected");
          }
          // Paksa buka menu meskipun ctrl ditekan
          setOpen(true);
        };

        return (
          <DropdownMenu open={open} onOpenChange={setOpen}>
            <DropdownMenuTrigger asChild disabled={isDisabled}>
              <Button
                size="icon"
                onClick={handleClick}
                className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
              >
                <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={`cursor-pointer 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}
                >
                  <MoveDownRight className="w-4 h-4 me-1.5" />
                  Pindah Ke Mediahub
                </DropdownMenuItem>
              </Link>
            </DropdownMenuContent>
          </DropdownMenu>
        );
      },
    },
  ];

  return columns;
};

export default useTableColumns;