import { ColumnDef } from "@tanstack/react-table";
import React from "react";
import { Person } from "../utils/make-hierar-data";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

export const useDefaultColumns = () => {
  const defaultColumns = React.useMemo<ColumnDef<Person>[]>(
    () => [
      {
        header: "First Name",
        id: "firstName",
        accessorKey: "firstName",
        meta: { label: "First Name" },
        // header: ({ table }) => (
        //   <>
        //     <button
        //       {...{
        //         onClick: table.getToggleAllRowsExpandedHandler(),
        //       }}
        //     >
        //       {table.getIsAllRowsExpanded() ? "👇" : "👉"}
        //     </button>{" "}
        //     First Name
        //   </>
        // ),
        cell: ({ row, getValue }) => {
          return (
            <div
              style={{ paddingLeft: `${row.depth * 2}rem`, display: "flex" }}
            >
              {row.getCanExpand() ? (
                <button
                  style={{
                    cursor: "pointer",
                    background: "none",
                    border: "none",
                  }}
                  onClick={() => {
                    row.getToggleExpandedHandler()();
                  }}
                >
                  {row.getIsExpanded() ? (
                    <ExpandMoreIcon />
                  ) : (
                    <ChevronRightIcon />
                  )}{" "}
                </button>
              ) : (
                <span style={{ marginRight: "0.8rem" }}></span>
              )}
              <span style={{ marginTop: "0.2rem" }}>{getValue<boolean>()}</span>
            </div>
          );
        },
      },
      {
        header: "Last Name",
        accessorKey: "lastName",
        size: 100,
        meta: { label: "Last Name", defaultPinned: "left" },
      },
      {
        header: "Email Id",
        accessorKey: "email",
        size: 150,
        meta: { label: "Email" },
      },
      {
        header: "Age",
        accessorKey: "age",
        size: 100,
        meta: { label: "Age" },
      },
      {
        header: "Visits",
        accessorKey: "visits",
        size: 150,
        meta: { label: "Visits" },
      },
      {
        header: "Progress",
        accessorKey: "progress",
        size: 150,
        meta: { label: "Progress" },
      },
      {
        header: "Department",
        accessorKey: "department",
        size: 150,
        meta: { label: "Department" },
      },
      {
        header: "Status",
        accessorKey: "status",
        meta: {
          label: "Status",
          type: "custom",
          propName: "renderStatus",
        },
      },
      {
        header: "Action",
        accessorKey: "action",
        meta: {
          label: "Action",
          type: "custom",
          propName: "renderAction",
          align: "right",
        },
      },
    ],
    []
  );

  return { defaultColumns };
};