import { useNavigate } from "react-router-dom";
import { useGetWalletFeatureEnabled } from "utils/hooks/useGetWalletFeatureEnabled";

import { commonColumnProperty } from "constants/data";
import { routerPaths } from "routes";
import { type GridColDef, Tooltip, Box, IconButton } from "uiCore";
import { WalletIcon, UserHistoryIcon } from "uiCore/icons";

import { useStyle } from "./style";

export const userColumns = (): GridColDef[] => {
  const isWalletFeatureEnabled = useGetWalletFeatureEnabled();
  const classes = useStyle();

  return [
    {
      field: "customerId",
      headerName: "Name",
      headerClassName: "columnHeader",
      hideable: false,
      valueGetter: ({ value }) => value.name,
      ...commonColumnProperty,
    },
    {
      field: "email",
      headerName: "Email",
      hideable: false,
      headerClassName: "columnHeader",
      renderCell: ({ row: { customerId } }) => {
        return (
          <Tooltip title={customerId?.email}>
            <Box className={classes.userEmail}>{customerId?.email}</Box>
          </Tooltip>
        );
      },
      ...commonColumnProperty,
    },
    {
      field: "contactNo",
      headerName: "Contact No.",
      headerClassName: "columnHeader",
      hideable: false,
      valueGetter: ({ row: { customerId } }) => customerId?.contactNo,
      ...commonColumnProperty,
    },
    {
      field: "createdAt",
      headerName: "Created At",
      headerClassName: "columnHeader",
      hideable: false,
      ...commonColumnProperty,
    },
    {
      field: "totalBooking",
      headerName: "Total Bookings",
      headerClassName: "columnHeader",
      hideable: false,
      ...commonColumnProperty,
    },
    {
      field: "totalEarning",
      headerName: "Total Earnings",
      headerClassName: "columnHeader",
      hideable: false,
      ...commonColumnProperty,
    },
    ...(isWalletFeatureEnabled
      ? ([
          {
            field: "walletId",
            headerName: "Wallet",
            hideable: false,
            width: 100,
            sortable: false,
            renderCell: () => {
              return (
                <Tooltip title="Wallet" placement="right">
                  <IconButton>
                    <WalletIcon />
                  </IconButton>
                </Tooltip>
              );
            },
          },
        ] as GridColDef[])
      : []),
    {
      field: "userDetails",
      headerName: "User Details",
      hideable: false,
      align: "center",
      width: 170,
      sortable: false,
      renderCell: ({ row }) => {
        const navigate = useNavigate();

        const { customerId } = row;

        const navigateToUserHistory = () => {
          navigate(`${routerPaths.userHistory}/${customerId?._id}`, {
            state: customerId?.name,
          });
        };

        return (
          <Tooltip title="User Details" placement="right">
            <IconButton id="user-history-icon" onClick={navigateToUserHistory}>
              <UserHistoryIcon />
            </IconButton>
          </Tooltip>
        );
      },
    },
  ];
};