import { Checkbox } from "@repo/shadcn-ui/components/checkbox";
import type { Table as TableModel } from "@tanstack/react-table";
import { useId } from "react";

import { entityListLabels } from "../lib/entity-list";

import { FormDialog } from "./form-dialog";

export function EntityTableColumnsDialog<T>({
  table,
  locale,
  open,
  onOpenChange,
}: {
  table: TableModel<T>;
  locale: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const id = useId();
  const labels = entityListLabels(locale);

  return (
    <FormDialog
      cancelLabel={locale.startsWith("en") ? "Close" : "Cerrar"}
      onOpenChange={onOpenChange}
      open={open}
      title={labels.columns}
    >
      <div className="space-y-3">
        {table.getAllLeafColumns().map((column) => (
          <label
            className="flex items-center gap-2"
            htmlFor={`${id}-column-${column.id}`}
            key={column.id}
          >
            <Checkbox
              checked={column.getIsVisible()}
              disabled={!column.getCanHide()}
              id={`${id}-column-${column.id}`}
              onCheckedChange={(checked) => column.toggleVisibility(checked === true)}
            />
            {String(column.columnDef.header)}
          </label>
        ))}
      </div>
    </FormDialog>
  );
}