import { useState } from 'react';

import Alert from '@material-hu/mui/Alert';
import Box from '@material-hu/mui/Box';
import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import Stack from '@material-hu/mui/Stack';
import Step from '@material-hu/mui/Step';
import StepLabel from '@material-hu/mui/StepLabel';
import Stepper from '@material-hu/mui/Stepper';
import Typography from '@material-hu/mui/Typography';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  onClose: () => void;
  onSave: Function;
  onReplace: Function;
  coverPicture: any;
  step: number;
  setStep: Function;
};

const CoverSteps = ({
  coverPicture,
  onSave,
  onReplace,
  onClose,
  step,
  setStep,
}: Props) => {
  const { t } = useLokaliseTranslation('backoffice_only');

  const [isLoading, setIsLoading] = useState(false);

  const handleNext = async () => {
    setIsLoading(true);
    if (await onSave()) {
      setStep((prevActiveStep: number) => prevActiveStep + 1);
    } else {
      onClose();
    }
    setIsLoading(false);
  };

  return (
    <>
      <DialogContent sx={{ textAlign: 'center' }}>
        <Box sx={{ width: '100%', p: 3, px: 2 }}>
          <Stepper
            activeStep={step}
            sx={{ px: 7 }}
          >
            <Step
              completed
              sx={{ mx: 5 }}
            >
              <StepLabel />
            </Step>
            <Step
              completed={step === 2}
              sx={{ mx: 5 }}
            >
              <StepLabel />
            </Step>
          </Stepper>
          {step === 0 && (
            <Typography sx={{ mt: 2, mb: 1, fontWeight: 'bold' }}>
              {t('backoffice_only:form_community_cover.steps_default')}
            </Typography>
          )}
          {step === 1 && (
            <>
              <Typography sx={{ mt: 2, mb: 1, fontWeight: 'bold' }}>
                {t('backoffice_only:form_community_cover.steps_bulk')}
              </Typography>
              <Alert
                severity="warning"
                variant="standard"
                sx={{ py: 0, mx: 4 }}
              >
                {t('backoffice_only:form_community_cover.steps_warning')}
              </Alert>
            </>
          )}
        </Box>
        <Stack
          sx={{
            justifyContent: 'top',
            height: '100%',
            aspectRatio: 'auto',
            mx: 8,
            '& img': {
              display: 'block',
              objectFit: 'cover',
              width: '100%',
              height: '130px',
              borderRadius: '10px',
            },
          }}
        >
          <img
            src={coverPicture}
            style={{ boxShadow: '15px' }}
            alt=""
          />
        </Stack>
      </DialogContent>
      <DialogActions>
        {step === 0 && (
          <Button
            onClick={handleNext}
            variant="contained"
            disabled={isLoading}
          >
            {t('backoffice_only:form_community_cover.continue')}
          </Button>
        )}
        {step === 1 && (
          <>
            <Button
              onClick={() => {
                onReplace();
                onClose();
              }}
              variant="text"
            >
              {t('backoffice_only:form_community_cover.yes_replace')}
            </Button>
            <Button
              onClick={onClose}
              variant="contained"
            >
              {t('backoffice_only:form_community_cover.no_thanks')}
            </Button>
          </>
        )}
      </DialogActions>
    </>
  );
};

export default CoverSteps;