import React, { useState, useRef } from 'react';
import classNames from 'classnames/bind';
import { emailValidate } from 'utils/helpers';
import { useSetPrimaryEmailMutation, Email } from 'typings/graphql';
import { Box, Text, Icon, MainButton } from '@nova-hf/ui';
import { useTranslation } from 'utils/i18n';

import s from './ConfirmationInfo.module.scss';

const cn = classNames.bind(s);
interface IConfirmationInfoProps {
  title: string;
  description: string;
  color: string;
  emailList: Array<Email>;
  contactSSN: string;
  onClose: () => void;
}

export const ConfirmationInfo = ({
  title,
  description,
  emailList,
  contactSSN,
  onClose,
}: IConfirmationInfoProps) => {
  const { t } = useTranslation('stillingar');
  const [selectedEmail, setSelectedEmail] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [validMail, setValidMail] = useState(false);
  const [showEmailInput, setShowEmailInput] = useState(false);
  const [step, setStep] = useState(1);
  const [newEmail, setNewEmail] = useState('');
  const [setPrimaryEmail, { loading }] = useSetPrimaryEmailMutation();
  const inputRef = useRef(null);

  const selectEmail = (email: string) => {
    if (email && emailValidate(email)) {
      setValidMail(true);
      setSelectedEmail(email);
      setShowEmailInput(false);
    }
    setErrorMessage('');
  };

  const createEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (emailValidate(e.target.value)) {
      setValidMail(true);
      setSelectedEmail(e.target.value);
      setNewEmail(e.target.value);
      setErrorMessage('');
    } else {
      setValidMail(false);
      setSelectedEmail('');
    }
  };

  const togleEmailInput = () => {
    setShowEmailInput(!showEmailInput);
  };

  const confirmEmail = async () => {
    if (selectedEmail) {
      if (emailValidate(selectedEmail)) {
        try {
          await setPrimaryEmail({
            variables: { input: { email: selectedEmail }, ssn: contactSSN },
          });
          setErrorMessage('');
          setStep(2);
        } catch (e) {
          setErrorMessage(t('emailConfirmation.error'));
        }
      } else {
        setErrorMessage(t('emailConfirmation.emailInvalid'));
      }
    } else {
      setErrorMessage(t('emailConfirmation.error'));
    }
  };

  const isNewEmail = newEmail && newEmail === selectedEmail;
  if (!emailList?.length) {
    return null;
  }
  return (
    <>
      {step === 1 && (
        <Box
          paddingLeft={{ sm: 3, md: 8 }}
          paddingRight={{ sm: 3, md: 8 }}
          paddingTop={{ sm: 5, md: 8 }}
          paddingBottom={{ sm: 5, md: 8 }}
          className={s.info__wrapper}
        >
          <Box className={s.info__title}>{title}</Box>
          <Text variant="pMediumRegular">{description}</Text>
          {errorMessage && (
            <Box className={s.info__error} display="flex">
              <Icon color="pink" icon="close" />
              <Text color="pink" variant="pMediumRegular">
                {errorMessage}
              </Text>
            </Box>
          )}
          <Box className={s.info__scroller}>
            <Box className={s.info__emailWrapper}>
              {emailList &&
                emailList.map(({ email }) => {
                  const selected = email === selectedEmail;
                  return (
                    <Box
                      key={email}
                      borderStyle="solid"
                      marginBottom={4}
                      borderColor={selected ? 'pink' : 'grey200'}
                      borderWidth="2px"
                      dottedShadow="small"
                      cursor="pointer"
                      backgroundColor="white"
                      padding={3}
                      paddingLeft={{ sm: 1, md: 3 }}
                      paddingRight={{ sm: 1, md: 3 }}
                      onClick={() => selectEmail(email)}
                      display="flex"
                      className={s.info__email}
                    >
                      <Box className={s.info__center} marginRight={2} align-items="center">
                        <Icon color={selected ? 'pink' : 'grey200'} icon="letter" size={32} />
                      </Box>
                      <Box className={s.info__center} align-items="center">
                        <Text variant="pLargeBold">{email}</Text>
                      </Box>
                      <Box
                        className={cn(s.info__center, s.info__cta, s.info__hideInMobile)}
                        align-items="center"
                        width={20}
                        style={{ marginLeft: 'auto' }}
                      >
                        {!selected && <Icon color="pink" icon="longArrowRight" />}
                        <Text variant="pMediumBold" color={selected ? 'pink' : 'black100'}>
                          {selected
                            ? t('emailConfirmation.buttonSelected')
                            : t('emailConfirmation.buttonSelect')}
                        </Text>
                      </Box>
                    </Box>
                  );
                })}

              <Box
                borderStyle="solid"
                marginBottom={4}
                borderColor={isNewEmail && validMail ? 'pink' : 'grey200'}
                borderWidth="2px"
                dottedShadow="small"
                cursor="pointer"
                backgroundColor="white"
                padding={3}
                paddingLeft={{ sm: 1, md: 3 }}
                paddingRight={{ sm: 1, md: 3 }}
                onClick={showEmailInput ? undefined : () => togleEmailInput()}
                display="flex"
                className={s.info__email}
              >
                <Box className={s.info__center} marginRight={2} align-items="center">
                  <Icon color="pink" icon={showEmailInput ? 'letter' : 'add'} size={32} />
                </Box>
                {showEmailInput ? (
                  <input
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => createEmail(e)}
                    className={s.info__input}
                    ref={inputRef}
                    autoFocus
                  />
                ) : (
                  <Box className={s.info__center} align-items="center">
                    <Text variant="pLargeBold">Ég er að nota annað netfang</Text>
                  </Box>
                )}
                {!!(isNewEmail && validMail) && (
                  <Box
                    className={cn([s.info__center, s.info__cta, s.info__hideInMobile])}
                    align-items="center"
                    width={20}
                    style={{ marginLeft: 'auto' }}
                  >
                    <Text variant="pMediumBold" color="pink">
                      {t('emailConfirmation.buttonSelected')}
                    </Text>
                  </Box>
                )}
              </Box>
            </Box>
          </Box>
          <Box width="50%" className={s.info__button}>
            <MainButton
              isDisabled={!validMail}
              isLoading={loading}
              onClick={() => confirmEmail()}
              icon="arrowRight"
              text={t('emailConfirmation.confirm')}
            />
          </Box>
        </Box>
      )}
      {step === 2 && (
        <Box
          paddingLeft={{ sm: 3, md: 8 }}
          paddingRight={{ sm: 3, md: 8 }}
          paddingTop={{ sm: 5, md: 8 }}
          paddingBottom={{ sm: 5, md: 8 }}
          className={s.info__wrapper}
          textAlign="center"
          placeItems="center"
        >
          <Box className={s.info__title}>{t('emailConfirmation.confirmTitle')}</Box>
          <Text variant="pMediumRegular" textAlign="center">
            {t('emailConfirmation.confirmDescription')} <strong>{selectedEmail}</strong>
          </Text>
          <Box width="50%" display="inline-flex" marginTop={4}>
            <MainButton
              colorScheme="pink"
              onClick={() => onClose()}
              text={t('emailConfirmation.close')}
            />
          </Box>
        </Box>
      )}
    </>
  );
};