import { ColumnDef } from "@tanstack/react-table";
import { FiCheck } from "react-icons/fi";

export function createSelectionColumn<TData extends object>(): ColumnDef<TData, boolean> {
  return {
    id: "select",

    header: ({ table }) => {
      const checked = table.getIsAllRowsSelected();

      return (
        <label className="relative inline-flex h-5 w-5 cursor-pointer items-center justify-center">
          <input
            type="checkbox"
            checked={checked}
            onChange={table.getToggleAllRowsSelectedHandler()}
            aria-label="Toggle all rows selected"
            className="peer sr-only"
          />

          <span
            className="
              inline-flex h-5 w-5 items-center justify-center rounded-sm
              border-2 border-link-1 bg-white
              peer-checked:bg-link-1
            "
          >
            <FiCheck
              className={`text-white transition-opacity duration-200 ${
                checked ? "opacity-100" : "opacity-0"
              }`}
              size={14}
              strokeWidth={3}
            />
          </span>
        </label>
      );
    },

    cell: ({ row }) => {
      const checked = row.getIsSelected();

      return (
        <label className="relative inline-flex h-5 w-5 cursor-pointer items-center justify-center">
          <input
            type="checkbox"
            checked={checked}
            disabled={!row.getCanSelect()}
            onChange={row.getToggleSelectedHandler()}
            aria-label={`Select row ${row.index + 1}`}
            className="peer sr-only"
          />

          <span
            className="
              inline-flex h-5 w-5 items-center justify-center rounded-sm
              border-2 border-link-1 bg-white
              peer-checked:bg-link-1
              peer-disabled:cursor-not-allowed peer-disabled:opacity-50
            "
          >
            <FiCheck
              className={`text-white transition-opacity duration-200 ${
                checked ? "opacity-100" : "opacity-0"
              }`}
              size={14}
              strokeWidth={3}
            />
          </span>
        </label>
      );
    },

    enableSorting: false,
    size: 40,
  };
}