import React, { useState } from 'react';
import { NotificationBanner } from '@nova-hf/ui';
import { useSendEmailVerificationChallengeMutation } from 'typings/graphql';
import { useRouter } from 'next/router';
import { useTranslation } from 'utils/i18n';

type EmailNotificationBannerProps = {
  customerEmail?: string;
  hasAlertPing?: boolean;
  isEmailVerified?: boolean;
};

const EmailNotificationBanner = ({
  customerEmail,
  hasAlertPing,
  isEmailVerified,
}: EmailNotificationBannerProps) => {
  const { t } = useTranslation('containers');

  const [showDescription, setShowDescription] = useState(false);
  const [showAttentionBanner, setShowAttentionBanner] = useState(false);

  const [sendEmailVerification, { loading }] = useSendEmailVerificationChallengeMutation();
  const router = useRouter();
  const handleSendEmailVerification = async () => {
    if (customerEmail) {
      try {
        const { data } = await sendEmailVerification({
          variables: {
            input: {
              customerId: (router.query.customerId as string) ?? '',
              email: customerEmail ?? '',
            },
          },
        });
        if (data?.sendEmailVerificationChallenge.emailVerificationChallenge?.id) {
          setShowDescription(true);
        } else {
          setShowAttentionBanner(true);
        }
      } catch (e) {
        setShowAttentionBanner(true);
      }
    }
  };

  const hasEmailVerifiedQuery = router.query.isEmailVerified;

  const handleRemoveQueryParam = () => {
    delete router.query.isEmailVerified;
    router.push(router);
  };

  if (!hasEmailVerifiedQuery && isEmailVerified && !!customerEmail) return null;

  if (hasEmailVerifiedQuery && isEmailVerified && !!customerEmail) {
    return (
      <NotificationBanner
        description="Netfangið þitt hefur nú þegar verið staðfest. Ef þú þarft að breyta um netfang geturðu gert það í stillingum"
        eyebrowText="Netfang staðfest"
        icon="letter"
        mainButtonColored={{
          icon: 'longArrowRight',
          text: 'Loka glugga',
          onClick: handleRemoveQueryParam,
        }}
        title="Allt klappað og klárt 👏"
      />
    );
  }
  return customerEmail && !isEmailVerified ? (
    <NotificationBanner
      icon="click"
      eyebrowText={t('emailNotificationBanner.confirmEmail')}
      title={`${t('emailNotificationBanner.confirmEmailTitle')} ${customerEmail}`}
      {...(showDescription && {
        description: t('emailNotificationBanner.gotNewConfirmationMail'),
      })}
      {...(showAttentionBanner && {
        attentionBanner: {
          icon: 'warning',
          strongText: t('emailNotificationBanner.errorStrong'),
          regularText: t('emailNotificationBanner.errorRegular'),
        },
      })}
      hasPingAlert={hasAlertPing}
      mainButtonColored={{
        text: t('emailNotificationBanner.newConfirmationButton'),
        isDisabled: loading,
        onClick: () => handleSendEmailVerification(),
      }}
      mainButtonWhite={{
        text: t('emailNotificationBanner.changeEmailButton'),
        onClick: () =>
          router.push({
            pathname: `/beta/${router.query.customerId}/stillingar/`,
            query: { email: 'new' },
          }),
      }}
    />
  ) : (
    <NotificationBanner
      icon="click"
      eyebrowText={t('emailNotificationBanner.noEmailEyebrow')}
      title={t('emailNotificationBanner.noEmailTitle')}
      description={t('emailNotificationBanner.noEmailDescriptipon')}
      hasPingAlert={hasAlertPing}
      mainButtonColored={{
        icon: 'longArrowRight',
        text: t('emailNotificationBanner.noEmailMainButton'),
        onClick: () =>
          router.push({
            pathname: `/beta/${router.query.customerId}/stillingar/`,
            query: { email: 'new' },
          }),
      }}
    />
  );
};

export default EmailNotificationBanner;