import { FC } from 'react';
import { Trans } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

import Box from '@material-hu/mui/Box';
import Card from '@material-hu/mui/Card';
import Container from '@material-hu/mui/Container';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { useTranslation } from './i18n';
import { eventsRoutes } from './routes';

export type ExhaustEventRegistrationProps = {
  waitingListCode: string | number;
  hasWaitingList: boolean;
  eventName?: string;
  onClick?: () => void;
};

export const ExhaustEventRegistration: FC<
  ExhaustEventRegistrationProps
> = props => {
  const {
    waitingListCode,
    hasWaitingList,
    eventName = '',
    onClick = () => null,
  } = props;

  const { t } = useTranslation();
  const navigate = useNavigate();

  const determineCardBackgroundColor = () => {
    if (!hasWaitingList) {
      return '#fdeded';
    }
    if (waitingListCode) {
      return '#edf7ed';
    }
    return '#fff4e5';
  };

  return (
    <Container
      sx={{ py: 4 }}
      maxWidth="sm"
    >
      <Card
        sx={{
          width: '100%',
          backgroundColor: determineCardBackgroundColor(),
          borderRadius: '4px',
        }}
      >
        <Box sx={{ p: 3, display: 'flex' }}>
          {!hasWaitingList && (
            <Typography sx={{ color: '#5f2120' }}>
              {t('EXHAUST_EVENT_REGISTRATION')}
            </Typography>
          )}
          {hasWaitingList && !waitingListCode && (
            <Typography sx={{ color: '#663c00' }}>
              {t('ALREADY_EVENT_WAITING_LIST')}
            </Typography>
          )}
          {hasWaitingList && waitingListCode && (
            <Typography sx={{ color: '#1e4620' }}>
              <Trans
                i18nKey="CONFIRM_WAITING_LIST_REGISTRATION"
                values={{
                  eventname: eventName,
                  waitingListCode: waitingListCode,
                }}
                t={t}
                components={{ bold: <strong /> }}
              />
            </Typography>
          )}
        </Box>
      </Card>
      <Box sx={{ mt: 4 }}>
        {!hasWaitingList && (
          <Box
            sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}
          >
            <Typography sx={{ fontWeight: 500 }}>
              {t('REGISTER_WAITING_LIST_QUESTION')}
            </Typography>
          </Box>
        )}
        <Box
          sx={{
            display: 'flex',
            width: '100%',
            justifyContent: 'space-around',
            mt: 3,
          }}
        >
          <Button
            variant="contained"
            color="secondary"
            onClick={() => navigate(eventsRoutes.events())}
          >
            {t('GO_BACK_TO_EVENTS')}
          </Button>
          {!hasWaitingList && (
            <Button
              variant="contained"
              onClick={onClick}
            >
              {t('REGISTER')}
            </Button>
          )}
        </Box>
      </Box>
    </Container>
  );
};

export default ExhaustEventRegistration;