import { memo } from 'react';

import { IconChevronRight, IconDownload } from '@material-hu/icons/tabler';
import Card from '@material-hu/mui/Card';
import CardActionArea from '@material-hu/mui/CardActionArea';
import CircularProgress from '@material-hu/mui/CircularProgress';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { type PayrollReceipt } from '../types';
import { formatDevengo, formatMonth } from '../utils';

type ReceiptCardProps = {
  receipt: PayrollReceipt;
  isLoading: boolean;
  onClick: (receipt: PayrollReceipt) => void;
  onDownload: (receipt: PayrollReceipt) => void;
};

export const ReceiptCard = memo(
  ({ receipt, isLoading, onClick, onDownload }: ReceiptCardProps) => {
    return (
      <Card
        variant="outlined"
        sx={{ mb: 1.5 }}
      >
        <CardActionArea
          onClick={() => onClick(receipt)}
          disabled={isLoading}
          sx={{ p: 2 }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <Stack>
              <Typography
                variant="subtitle1"
                fontWeight="fontWeightBold"
              >
                {receipt.dNomina}
              </Typography>
              <Stack sx={{ flexDirection: 'row' }}>
                <Typography
                  variant="body2"
                  color="text.secondary"
                  fontWeight="fontWeightSemiBold"
                >
                  {formatMonth(receipt)}
                </Typography>
                <Typography
                  variant="body2"
                  color="text.secondary"
                >
                  {` · Devengo: ${formatDevengo(receipt)}`}
                </Typography>
              </Stack>
            </Stack>
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 0.5,
              }}
            >
              {isLoading && <CircularProgress size={20} />}
              {!isLoading && (
                <IconChevronRight
                  size={20}
                  color="action"
                />
              )}
              <Stack onClick={e => e.stopPropagation()}>
                <IconButton
                  aria-label="Descargar nómina"
                  disabled={isLoading}
                  onClick={() => onDownload(receipt)}
                >
                  <IconDownload />
                </IconButton>
              </Stack>
            </Stack>
          </Stack>
        </CardActionArea>
      </Card>
    );
  },
);