import { FC, useState } from 'react';
import Webcam from 'react-webcam';

import CallEndOutlinedIcon from '@material-hu/icons/material/CallEndOutlined';
import MicOffOutlinedIcon from '@material-hu/icons/material/MicOffOutlined';
import MicOutlinedIcon from '@material-hu/icons/material/MicOutlined';
import VideocamOffOutlinedIcon from '@material-hu/icons/material/VideocamOffOutlined';
import VideocamOutlinedIcon from '@material-hu/icons/material/VideocamOutlined';
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 { useLokaliseTranslation } from 'src/utils/i18n';

type GettingReadyModalProps = {
  isVideoCall: boolean;
  onClose: () => void;
  onAbort: () => void;
};

const deactiveColor = '#F04438';

export const GettingReadyModal: FC<GettingReadyModalProps> = props => {
  const { isVideoCall, onClose, onAbort } = props;
  const [activeCamera, setActiveCamera] = useState(isVideoCall);
  const [activeMic, setActiveMic] = useState(false);

  const { t } = useLokaliseTranslation('web_only');

  const toggleCamera = () => setActiveCamera(prevState => !prevState);

  const toggleMic = () => setActiveMic(prevState => !prevState);

  const handleClose = () => {
    onAbort();
    onClose();
  };

  const MicIcon = activeMic ? MicOutlinedIcon : MicOffOutlinedIcon;
  const CamIcon = activeCamera ? VideocamOutlinedIcon : VideocamOffOutlinedIcon;

  return (
    <Stack
      sx={{
        alignItems: 'center',
        backgroundColor: '#111927BF',
        width: '590px',
        height: '552px',
      }}
    >
      {isVideoCall && activeCamera && (
        <Webcam
          width={590}
          height={480}
        />
      )}
      {(!isVideoCall || !activeCamera) && (
        <Stack
          sx={{
            alignItems: 'center',
            justifyContent: 'center',
            flexGrow: 1,
          }}
        >
          <Typography
            color="white"
            variant="h6"
          >
            {t('feature_not_available.getting_ready')}
          </Typography>
          <Typography
            color="white"
            variant="body1"
            sx={{ mb: 2 }}
          >
            {t('feature_not_available.join_in_a_moment')}
          </Typography>
          <CircularProgress />
        </Stack>
      )}
      <Stack sx={{ flexDirection: 'row', gap: 2, py: 2 }}>
        <IconButton
          onClick={toggleMic}
          sx={{
            backgroundColor: activeMic ? '' : deactiveColor,
            '&:hover': {
              background: activeMic ? '' : deactiveColor,
            },
          }}
        >
          <MicIcon sx={{ color: 'white' }} />
        </IconButton>
        {isVideoCall && (
          <IconButton
            onClick={toggleCamera}
            sx={{
              backgroundColor: activeCamera ? '' : deactiveColor,
              '&:hover': {
                background: activeCamera ? '' : deactiveColor,
              },
            }}
          >
            <CamIcon sx={{ color: 'white' }} />
          </IconButton>
        )}
        <IconButton
          onClick={handleClose}
          sx={{
            backgroundColor: deactiveColor,
            '&:hover': {
              background: deactiveColor,
            },
          }}
        >
          <CallEndOutlinedIcon sx={{ color: 'white' }} />
        </IconButton>
      </Stack>
    </Stack>
  );
};

export default GettingReadyModal;