import { IconCheck, IconChevronRight, IconX } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import { appearFromBottom } from '@material-hu/utils/animations';

import Button from '@material-hu/components/design-system/Buttons/Button';
import Checkbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import Pills from '@material-hu/components/design-system/Pills';
import TableCell from '@material-hu/components/design-system/Table/components/TableCell';
import TableRow from '@material-hu/components/design-system/Table/components/TableRow';

import {
  type ApprovableStatus,
  type ApprovalRequest,
  TimeTrackingCategorizedHourStatus,
} from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { getProcessedListStatusPillDisplay } from '../utils';

import CommonRequestCells from './CommonRequestCells';
import {
  CHECKBOX_COLUMN_WIDTH,
  STICKY_LEFT_SX,
  STICKY_RIGHT_SX,
} from './constants';

type Props = {
  request: ApprovalRequest;
  index: number;
  isPendingTab: boolean;
  selectedList: 'pending' | 'processed';
  statusColumnWidth: number;
  isSelected: boolean;
  onToggleSelect: () => void;
  onOpenMenu: (
    event: React.MouseEvent<HTMLElement>,
    status: ApprovableStatus,
  ) => void;
  onShowDetails: () => void;
};

const ApprovalRequestRow = ({
  request,
  index,
  isPendingTab,
  selectedList,
  statusColumnWidth,
  isSelected,
  onToggleSelect,
  onOpenMenu,
  onShowDetails,
}: Props) => {
  const { t } = useLokaliseTranslation(['approval_requests']);
  const { palette } = useTheme();

  const stickyBg = isSelected
    ? palette.new.background.layout.brand
    : palette.new.background.elements.default;

  const processedPill =
    selectedList === 'processed'
      ? getProcessedListStatusPillDisplay(request)
      : null;

  return (
    <TableRow
      sx={{
        animation: `${appearFromBottom} 125ms ease-in-out backwards`,
        animationDelay: `${index * 25}ms`,
      }}
    >
      {isPendingTab && (
        <TableCell
          sx={{
            ...STICKY_LEFT_SX,
            width: CHECKBOX_COLUMN_WIDTH,
            backgroundColor: stickyBg,
          }}
        >
          <Checkbox
            checked={isSelected}
            onClick={onToggleSelect}
          />
        </TableCell>
      )}
      <CommonRequestCells
        {...request}
        firstColumnLeftOffset={isPendingTab ? CHECKBOX_COLUMN_WIDTH : 0}
        isSelected={isSelected}
      />
      {selectedList === 'pending' && (
        <TableCell
          sx={{
            ...STICKY_RIGHT_SX,
            right: 72,
            backgroundColor: stickyBg,
          }}
        >
          <Stack sx={{ flexDirection: 'row', gap: 1.5 }}>
            <Button
              variant="secondary"
              startIcon={<IconX size={16} />}
              data-approval-menu-trigger
              onClick={e =>
                onOpenMenu(e, TimeTrackingCategorizedHourStatus.REJECTED)
              }
              fullWidth
            >
              {t('approval_requests:reject')}
            </Button>
            <Button
              variant="primary"
              startIcon={<IconCheck size={16} />}
              onClick={e =>
                onOpenMenu(e, TimeTrackingCategorizedHourStatus.APPROVED)
              }
              data-approval-menu-trigger
              fullWidth
            >
              {t('approval_requests:approve')}
            </Button>
          </Stack>
        </TableCell>
      )}
      {selectedList === 'processed' && processedPill && (
        <TableCell
          sx={{
            ...STICKY_RIGHT_SX,
            right: 72,
            width: statusColumnWidth,
            backgroundColor: stickyBg,
          }}
        >
          <Pills
            size="small"
            label={t(processedPill.labelKey)}
            type={processedPill.type}
            hasIcon={false}
          />
        </TableCell>
      )}
      <TableCell
        sx={{
          ...STICKY_RIGHT_SX,
          width: 72,
          backgroundColor: stickyBg,
        }}
      >
        <IconButton onClick={onShowDetails}>
          <IconChevronRight />
        </IconButton>
      </TableCell>
    </TableRow>
  );
};

export default ApprovalRequestRow;