import { IconClockExclamation } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { type SxProps, type Theme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Avatar from '@material-hu/components/design-system/Avatar';
import TableCell from '@material-hu/components/design-system/Table/components/TableCell';
import Title from '@material-hu/components/design-system/Title';

import useFormatDate from 'src/hooks/useFormatDate';
import { type ApprovalRequest } from 'src/types/timeTracking';
import { displayHoursAndMinutes } from 'src/utils/timeTracking';

import EllipsisTooltip from 'src/components/EllipsisTooltip';

import { STICKY_LEFT_SX } from './constants';

type Props = Pick<
  ApprovalRequest,
  | 'fullName'
  | 'hourCategoryName'
  | 'dateString'
  | 'hours'
  | 'status'
  | 'profilePicture'
> & {
  firstColumnLeftOffset?: number;
  isSelected?: boolean;
};

const CommonRequestCells = ({
  fullName,
  profilePicture,
  hourCategoryName,
  dateString,
  hours,
  firstColumnLeftOffset = 0,
  isSelected = false,
}: Props) => {
  const { formatDate } = useFormatDate();

  const selectedRowBgSx: SxProps<Theme> = isSelected
    ? {
        backgroundColor: ({ palette }) => palette.new.background.layout.brand,
      }
    : {};

  return (
    <>
      <TableCell
        sx={{
          ...STICKY_LEFT_SX,
          left: firstColumnLeftOffset,
          boxShadow: ({ palette }) =>
            `inset -1px 0 0 0 ${palette.new.border.neutral.default}`,
          backgroundColor: ({ palette }) =>
            isSelected
              ? palette.new.background.layout.brand
              : palette.new.background.elements.default,
        }}
      >
        <Stack
          sx={{
            alignItems: 'center',
            flexDirection: 'row',
            gap: 1,
          }}
        >
          <Avatar
            src={profilePicture || ''}
            size="small"
          />
          <Title
            variant="S"
            title={fullName}
            overflow="tooltip"
            withEllipsis
            sx={{
              overflow: 'hidden',
              width: '100%',
            }}
          />
        </Stack>
      </TableCell>
      <TableCell sx={selectedRowBgSx}>
        <Stack
          sx={{
            alignItems: 'center',
            flexDirection: 'row',
            gap: 1,
          }}
        >
          <Avatar
            Icon={IconClockExclamation}
            size="small"
          />
          <EllipsisTooltip title={hourCategoryName}>
            <Typography
              variant="globalS"
              sx={{
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
            >
              {hourCategoryName}
            </Typography>
          </EllipsisTooltip>
        </Stack>
      </TableCell>
      <TableCell sx={selectedRowBgSx}>
        <Typography
          variant="globalS"
          sx={{ textTransform: 'uppercase' }}
        >
          {formatDate(dateString, 'dd/MMM/yyyy')}
        </Typography>
      </TableCell>
      <TableCell sx={selectedRowBgSx}>
        <Typography variant="globalS">
          {displayHoursAndMinutes(hours, false, true)}
        </Typography>
      </TableCell>
    </>
  );
};

export default CommonRequestCells;