import { IconX } from '@material-hu/icons/tabler';
import Dialog from '@material-hu/mui/Dialog';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';
import useMediaQuery from '@material-hu/mui/useMediaQuery';
import { useTheme } from '@material-hu/mui/styles';

import { TournamentPredictionResponse } from 'src/types/prode';
import { useLokaliseTranslation } from 'src/utils/i18n';

import MobileDialog from './MobileDialog';
import PodiumPreviewContent from './PodiumPreviewContent';

type PodiumPreviewDialogProps = {
  open: boolean;
  prediction: TournamentPredictionResponse['prediction'] | undefined;
  deadline?: string;
  isOpen: boolean;
  onClose: () => void;
  onModify: () => void;
};

const PodiumPreviewDialog = ({
  open,
  prediction,
  deadline,
  isOpen,
  onClose,
  onModify,
}: PodiumPreviewDialogProps) => {
  const { t } = useLokaliseTranslation('sportsPool');
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));

  if (!prediction) return null;

  const content = (
    <PodiumPreviewContent
      prediction={prediction}
      deadline={deadline}
      isOpen={isOpen}
      onModify={onModify}
    />
  );

  if (isMobile) {
    return (
      <MobileDialog
        open={open}
        onClose={onClose}
        title={t('ranking_page.my_ideal_podium')}
      >
        {content}
      </MobileDialog>
    );
  }

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="xs"
      fullWidth
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          px: 2,
          py: 2,
          borderBottom: '1px solid',
          borderColor: theme.palette.new.border.neutral.divider,
        }}
      >
        <Typography
          variant="globalM"
          fontWeight="fontWeightSemiBold"
        >
          {t('ranking_page.my_ideal_podium')}
        </Typography>
        <Stack sx={{ ml: 'auto' }} />
        <IconButton
          onClick={onClose}
          sx={{ p: 0 }}
        >
          <IconX size={20} />
        </IconButton>
      </Stack>
      {content}
    </Dialog>
  );
};

export default PodiumPreviewDialog;