import { FC, useState, useEffect } from 'react';
import { useFormContext } from 'react-hook-form';

import MailOutlineIcon from '@material-hu/icons/material/MailOutline';
import Box from '@material-hu/mui/Box';
import Divider from '@material-hu/mui/Divider';
import Typography from '@material-hu/mui/Typography';

import useGeneralError from 'src/hooks/useGeneralError';
import { unableInviteCodeWithToken } from 'src/services/instance';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getInvitationLink } from 'src/utils/instance';

import CopyInvitationLink from 'src/components/dashboard/invitePeople/components/CopyInvitationLink';
import InvitationForm from 'src/components/dashboard/invitePeople/components/InvitationForm';
import InvitationLink from 'src/components/dashboard/invitePeople/components/InvitationLink';
import DeactivateLinkModal from 'src/components/dashboard/invitePeople/DeactivateLinkModal';

import CommunityCard from './components/CommunityCard';

export type InvitePeopleCommunityProps = {
  instanceId: number;
  token: string;
};

const InvitePeopleCommunity: FC<InvitePeopleCommunityProps> = props => {
  const { instanceId, token } = props;

  const { t } = useLokaliseTranslation(['authentication', 'invitePeople']);
  const showGeneralError = useGeneralError();

  const { getValues } = useFormContext();

  const [openDeactivateLink, setOpenDeactivateLink] = useState(false);
  const [invitationLink, setInvitationLink] = useState('');

  const getLinkInvitation = async () => {
    try {
      const link = await getInvitationLink(
        instanceId,
        getValues('companyName'),
        token,
      );
      setInvitationLink(link);
    } catch (err) {
      showGeneralError(err, t('get_invitation_link_error'));
    }
  };

  const handleUnableInviteCode = async () => {
    try {
      await unableInviteCodeWithToken(instanceId, token);
      getLinkInvitation();
      setOpenDeactivateLink(false);
    } catch (err) {
      showGeneralError(err, t('disabled_invite_code_error'));
    }
  };

  useEffect(() => {
    if (instanceId === undefined || token === undefined) {
      return;
    }

    getLinkInvitation();
  }, [instanceId, token]);

  const handleOnDeactivateLink = () => {
    setOpenDeactivateLink(true);
  };

  return (
    <CommunityCard
      title={t('INVITE_PEOPLE')}
      subtitle={t('INVITE_PEOPLE_SUBTITLE')}
      firstElement
    >
      <Box sx={{ mr: { xs: '0%', sm: '10%', md: '20%' } }}>
        <CopyInvitationLink handleOnDeactivateLink={handleOnDeactivateLink} />
        <DeactivateLinkModal
          open={openDeactivateLink}
          handleClose={() => setOpenDeactivateLink(false)}
          handleDisableInviteCode={handleUnableInviteCode}
          instanceName={getValues('companyName')}
        />
        <InvitationLink invitationLink={invitationLink} />
      </Box>
      <Box sx={{ mr: { xs: '0%', sm: '10%', md: '20%' } }}>
        <Divider sx={{ my: 3, borderWidth: '1px' }} />
        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
          <MailOutlineIcon sx={{ fontSize: '16px', mr: 0.5 }} />
          <Typography sx={{ fontSize: '12px', fontWeight: '500' }}>
            {t('email_invite')}
          </Typography>
        </Box>
        <InvitationForm />
      </Box>
    </CommunityCard>
  );
};

export default InvitePeopleCommunity;