import Tooltip from '@design-system/Tooltip';
import { TableCell as MuiTableCell, Typography, useTheme } from '@mui/material';

import { type TableCellProps } from './types';

const TableCell = ({
  children,
  sx,
  tooltipTitle,
  tooltipProps = {},
  headerCell = false,
  sortable = false,
  actionable = false,
  selectionCell = false,
  collapsableCell = false,
  ...props
}: TableCellProps) => {
  const theme = useTheme();
  const hoverStyles = actionable
    ? {
        cursor: 'pointer',
        '&:hover': {
          backgroundColor: theme.palette.new.action.background.neutral.hover,
        },
      }
    : {};

  const selectionStyles = selectionCell
    ? {
        borderRight: `4px solid ${theme.palette.new.border.neutral.default}`,
      }
    : {};

  const collapsableStyles = collapsableCell ? { width: '74px' } : {};

  return (
    <Tooltip
      description={tooltipTitle}
      disableTooltip={!tooltipTitle}
      direction="bottom"
      {...tooltipProps}
    >
      <MuiTableCell
        align={selectionCell || collapsableCell ? 'center' : 'left'}
        sx={{
          py: 1.5,
          px: 1.5,
          ...selectionStyles,
          ...collapsableStyles,
          ...hoverStyles,
          ...(headerCell && {
            minHeight: '60px',
          }),
          ...(headerCell &&
            sortable && {
              '&:hover': {
                '& .MuiTypography-root': {
                  color: theme.palette.new.text.neutral.default,
                },
              },
            }),
          ...sx,
          '& .MuiCheckbox-root.Mui-checked': {
            color: theme.palette.new.action.button.background.primary.default,
          },
        }}
        {...props}
      >
        {headerCell && (
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            sx={{ color: theme.palette.new.text.neutral.lighter }}
          >
            {children}
          </Typography>
        )}
        {!headerCell && (
          <div>
            <Typography variant="globalS">{children}</Typography>
          </div>
        )}
      </MuiTableCell>
    </Tooltip>
  );
};

export type { TableCellProps };

export default TableCell;
