import { FC, useState } from 'react';
import { useNavigate } from 'react-router-dom';

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

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

import computerIcon from 'src/assets/svg/computer.svg';
import { useAuth } from 'src/contexts/JWTContext';
import { useSettings } from 'src/contexts/SettingsContext';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type NewCommunityCreatedProps = {
  instanceId: number;
  email: string;
  password: string;
  color: string;
};

const NewCommunityCreated: FC<NewCommunityCreatedProps> = props => {
  const { instanceId, email, password, color } = props;

  const [isLoading, setIsLoading] = useState(false);
  const { t } = useLokaliseTranslation('authentication');
  const { enqueueSnackbar } = useSnackbar();

  const { setPrimary } = useSettings();

  const navigate = useNavigate();
  const { loginNewCommunity } = useAuth();

  const handleLogin = async () => {
    setIsLoading(true);
    const body = {
      employeeInternalId: email,
      instanceId,
      password,
    };
    try {
      await loginNewCommunity(body);
      setPrimary(color);
      navigate('/', { replace: true });
    } catch (e) {
      setIsLoading(false);
      enqueueSnackbar({ title: t('ERROR_LOGIN_COMMUNITY'), variant: 'error' });
    }
  };

  const backOfficeLink = (
    <Link
      href="https://admin.humand.co"
      target="_blank"
      rel="noopener"
    >
      <Typography>{t('BACKOFFICE_LINK')}</Typography>
    </Link>
  );

  return (
    <Container
      sx={{
        maxWidth: { xs: '90%', sm: '70%', md: '40%' },
        py: { xs: 2, sm: 4, lg: 6 },
      }}
      maxWidth={false}
    >
      <CardHeader
        title={t('COMMUNITY_CREATED')}
        sx={{ ml: 2 }}
        titleTypographyProps={{ align: 'center', variant: 'h3' }}
      />
      <Card sx={{ width: '100%', mt: 2, py: 3 }}>
        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
          <Box
            component="img"
            sx={{
              height: 130,
              width: 140,
              maxHeight: { xs: 80, md: 130 },
              maxWidth: { xs: 100, md: 140 },
            }}
            alt=""
            src={computerIcon}
          />
        </Box>
        <Box sx={{ width: '100%', mt: 2, px: 3 }}>
          <Typography sx={{ textAlign: 'center' }}>
            {t('COMMUNITY_CREATED_INFO')}
          </Typography>
          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 1 }}>
            {backOfficeLink}
          </Box>
        </Box>
      </Card>
      <Box
        sx={{ width: '100%', display: 'flex', justifyContent: 'center', mt: 4 }}
      >
        <Button
          variant="contained"
          color="success"
          sx={{ width: '50%' }}
          onClick={handleLogin}
          disabled={isLoading}
        >
          <Typography sx={{ fontSize: '18px', fontWeight: 600 }}>
            {t('GET_STARTED')}
          </Typography>
        </Button>
      </Box>
    </Container>
  );
};

export default NewCommunityCreated;