import * as React from 'react';
import Wrapper from 'components/app-layout/Wrapper';
import {
  Button,
  ContainerDeprecated,
  EmptyMessage,
  TextBox,
  FormWrapper,
  NumberTextBox,
  Progress,
} from '@nova-hf/ui';
import { useMutation } from '@apollo/client';
import { REGISTER_SUBSCRIPTION } from 'graphql/mutations/subscription';
import { parseToken, decodeToken, getSmsCode, reLogin } from 'utils/auth';
import { useTranslation } from 'utils/i18n';
import { useRouter } from 'next/router';
import { emailValidate } from 'utils/helpers';
import { IContext } from 'typings/context';

const SkraOskrad = (props: { token: { [key: string]: string }; subscriptionId: string }) => {
  const { token, subscriptionId } = props;
  const { t } = useTranslation('registerUnregistered');
  const router = useRouter();

  const isStaff = token.is_staff === 'true';
  const isEIdLogin = token.idp === 'audkenni';

  if (!isStaff && !isEIdLogin) {
    return (
      <Wrapper header="none" noFooter>
        <Progress
          length={1}
          steps={['Skrá óskráð frelsi']}
          current={1}
          color={'pink'}
          highestStep={1}
          onClose={() => {
            router.back();
          }}
        />
        <ContainerDeprecated spacing underBar>
          <h1>{t('reLoginPrompt.title')}</h1>
          <p>{t('reLoginPrompt.description')}</p>
          <br />
          <Button
            onClick={() => {
              reLogin(router.asPath);
            }}
            arrowRight
          >
            {t('reLoginPrompt.reLoginButton')}
          </Button>
        </ContainerDeprecated>
      </Wrapper>
    );
  }

  const [phoneNumber, setPhoneNumber] = React.useState(subscriptionId);
  const [ssn, setSsn] = React.useState(token.profile_ssn ?? '');
  const [email, setEmail] = React.useState('');
  const [infoConfirmed, setInfoConfirmed] = React.useState(false);
  const [smsCode, setSmsCode] = React.useState('');
  const [getCodeError, setGetCodeError] = React.useState('');

  const [registerSubscription, { loading, data, error }] = useMutation(REGISTER_SUBSCRIPTION);

  const showSmsCodeInput = infoConfirmed && !getCodeError;
  const disablePhoneInput: boolean =
    (infoConfirmed && !getCodeError) || subscriptionId.length === 7;
  const disableSsnInput = (infoConfirmed && !getCodeError) || isEIdLogin;

  const removeNonDigits = (str: string) => {
    const notDigitRegex = /[^\d]/g;
    return str.replace(notDigitRegex, '');
  };

  const confirmInfo = () => {
    if (isStaff) {
      // Staff skips sms code step
      register({ phoneNumber, ssn, email, smsCode: '' });
    } else {
      getSmsCode(removeNonDigits(phoneNumber)).then((res) => {
        if (res?.code !== 0) {
          setGetCodeError(res.message);
        } else {
          setInfoConfirmed(true);
          setGetCodeError('');
        }
      });
    }
  };

  const register = (registerParams: {
    ssn: string;
    smsCode: string;
    email: string;
    phoneNumber: string;
  }) => {
    registerSubscription({
      variables: {
        input: {
          smsCode: registerParams.smsCode,
          email: registerParams.email,
          subscriptionId: removeNonDigits(registerParams.phoneNumber),
          ssn: removeNonDigits(registerParams.ssn),
        },
      },
    });
  };

  const onCloseFunc = (isEID: boolean, staff: boolean, phoneNum: string) => {
    if (isEID || error || data?.registerSubscription?.error) {
      router.push(`/${router.query.ssn}/thjonustur`);
      return;
    }
    if (phoneNumber) {
      router.push(`/thjonusta/${phoneNum}`);
      return;
    }

    if (staff) {
      router.back();
    } else {
      router.push({ pathname: '/' });
    }

    return;
  };

  return (
    <Wrapper header="none" noFooter>
      <Progress
        length={1}
        steps={['Skrá óskráð frelsi']}
        current={1}
        color={'pink'}
        highestStep={1}
        onClose={() => {
          onCloseFunc(isEIdLogin, isStaff, phoneNumber);
        }}
      />
      <ContainerDeprecated spacing underBar>
        <>
          {!data && <h1>{t('title')}</h1>}

          {error && (
            <div style={{ textAlign: 'center' }}>
              <EmptyMessage
                title={t('error.default.title')}
                description={t('error.default.description')}
              />
              <Button
                onClick={() => {
                  onCloseFunc(isEIdLogin, isStaff, phoneNumber);
                }}
              >
                Loka
              </Button>
            </div>
          )}

          {data && (
            <>
              {data?.registerSubscription?.error ? (
                <div style={{ textAlign: 'center' }}>
                  <EmptyMessage
                    title={t('error.default.title')}
                    description={
                      data?.registerSubscription?.error?.message ?? t('error.default.description')
                    }
                  />
                  <Button
                    onClick={() => {
                      onCloseFunc(isEIdLogin, isStaff, phoneNumber);
                    }}
                  >
                    Loka
                  </Button>
                </div>
              ) : (
                <div>
                  <h1>{t('success.title')}</h1>
                  <p>{t('success.description')}</p>
                  <br />
                  <Button
                    onClick={() => {
                      onCloseFunc(isEIdLogin, isStaff, phoneNumber);
                    }}
                  >
                    Loka
                  </Button>
                </div>
              )}
            </>
          )}

          {!data && !error && (
            <>
              <p>{t('infoInputDescription')}</p>
              <FormWrapper>
                <NumberTextBox
                  tel
                  name="phoneNumber"
                  label={t('labels.phoneNumber')}
                  value={phoneNumber}
                  onChange={(e: { target: { value: string } }) =>
                    setPhoneNumber(e.target.value.replace(' ', ''))
                  }
                  disabled={disablePhoneInput}
                />
                <NumberTextBox
                  ssn
                  name="ssn"
                  label={t('labels.ssn')}
                  value={ssn}
                  onChange={(e: { target: { value: string } }) => {
                    setSsn(e.target.value.replace('-', ''));
                  }}
                  disabled={disableSsnInput}
                />
                <TextBox
                  name="email"
                  label={t('labels.email')}
                  defaultValue={''}
                  onChange={(e: { target: { value: string } }) => setEmail(e.target.value)}
                  disabled={infoConfirmed && !getCodeError}
                />
                {!infoConfirmed && (
                  <Button
                    fill
                    onClick={confirmInfo}
                    loading={loading}
                    disabled={
                      removeNonDigits(phoneNumber)?.length < 7 ||
                      ssn.length !== 10 ||
                      !emailValidate(email)
                    }
                  >
                    {isStaff ? t('labels.confirm') : t('labels.continue')}
                  </Button>
                )}
              </FormWrapper>

              {getCodeError && <p>{getCodeError}</p>}

              {showSmsCodeInput && (
                <>
                  <p>{t('codeInputDescription', { phoneNumber })}</p>
                  <FormWrapper>
                    <NumberTextBox
                      name="smsCode"
                      label={t('labels.smsCode')}
                      length={6}
                      defaultValue={''}
                      value={smsCode}
                      onChange={(e: { target: { value: string } }) => {
                        setSmsCode(e.target.value);
                      }}
                    />
                    <Button
                      fill
                      onClick={() => {
                        register({ ssn, email, phoneNumber, smsCode });
                      }}
                      disabled={smsCode.length !== 6}
                      loading={loading}
                    >
                      {t('labels.confirm')}
                    </Button>
                  </FormWrapper>
                </>
              )}
            </>
          )}
        </>
      </ContainerDeprecated>
    </Wrapper>
  );
};

SkraOskrad.getInitialProps = (context: IContext) => {
  const { query } = context;
  const { token } = parseToken(context.req);
  const decoded = decodeToken(token);

  return {
    token: decoded,
    namespacesRequired: ['registerUnregistered'],
    subscriptionId: query?.subscriptionId ?? '',
  };
};

export default SkraOskrad;