import React, { useEffect, useState } from 'react';
import { Box, Icon, MainButton, SecondaryButton, Text } from '@nova-hf/ui';
import { Select } from 'frisco';
import Modal from 'frisco/Modal/Modal';
import { inject, observer } from 'mobx-react';
import { MobileSignupProducts } from 'store/mobileSignup';
import {
  OptionVariant,
  ProvisionedSubscriptionVariant,
  useIsEligibleForNetNetLazyQuery,
} from 'typings/graphql';
import { formatPrice } from 'utils/helpers';

import { useSignupScroll } from '../hooks/useSignupScroll';
import { MobileChildrenProps } from '../kaupa/StepSetup';

import MobileSubscriptionInfo from './MobileSubscriptionsInfo';
import SelectCompanyProductVariants from './SelectCompanyProductVariants';
import SingleOfferingVariants from './SingleOfferingVariants';
import StepsWrapper from './StepsWrapper';
import SubscriptionQuestion from './SubscriptionQuestion';

const SelectSubscription = ({
  title,
  id,
  mobileSignup,
  authentication,
  cart,
  signupSteps,
}: MobileChildrenProps) => {
  if (!mobileSignup) return null;
  const [subscriptions, setSubscriptions] = useState<(OptionVariant | undefined)[]>();
  const [isntEligable, setIsnitEligable] = useState(false);
  const [shouldDisableNetNet, setShouldDisableNetNet] = useState(false);
  const { onComplete } = useSignupScroll({
    id,
  });

  const [isEligibleForNetNet, { data }] = useIsEligibleForNetNetLazyQuery();

  useEffect(() => {
    (async () => {
      if (cart?.customerId || authentication?.customerId) {
        await isEligibleForNetNet({
          variables: {
            input: {
              id: cart?.customerId || authentication?.customerId,
            },
          },
        });
      }
    })();
  }, [cart?.customerId, authentication?.customerId]);

  useEffect(() => {
    const hasHeimanetInCart = mobileSignup.secondaryVariant.includes('med-heimaneti');
    if (
      hasHeimanetInCart &&
      !data?.isEligibleForNetNet &&
      (cart?.customerId || authentication?.customerId)
    ) {
      setIsnitEligable(true);
    } else {
      setIsnitEligable(false);
    }
  }, [mobileSignup.secondaryVariant]);

  useEffect(() => {
    switch (mobileSignup?.selectedSubscriptionType) {
      case MobileSignupProducts.Askrift:
        setSubscriptions(mobileSignup.askriftMonthly);
        break;
      case MobileSignupProducts.Frelsi:
        setSubscriptions(mobileSignup.frelsiMobileMonthly);
        break;
    }
  }, [
    mobileSignup?.selectedSubscriptionType,
    mobileSignup?.askriftMonthly,
    mobileSignup?.frelsiMobileMonthly,
  ]);

  const handleSelectedSubscription = (variant: OptionVariant) => {
    mobileSignup?.setSecondaryVariant(variant.id);
    signupSteps?.markStepComplete(id);
  };

  const onSubmit = () => {
    if (!authentication?.isTokenValid) {
      mobileSignup?.storeInCookie();
      authentication?.refresh('/farsimi/kaupa');
    } else {
      onComplete();
    }
  };
  const renderComponents = () => {
    switch (mobileSignup?.selectedSubscriptionType) {
      case MobileSignupProducts.Fyrirtaeki:
      case MobileSignupProducts.M2M:
      case MobileSignupProducts.Netkort:
        return <SelectCompanyProductVariants />;
      case MobileSignupProducts.Stakt:
        return <SingleOfferingVariants onCompleted={() => onSubmit()} />;
      default:
        return (
          <>
            <SubscriptionQuestion />
            {subscriptions?.map((item) => {
              if (!item) return null;

              const variantDetails = item.variantDetails as ProvisionedSubscriptionVariant;
              return (
                <Select
                  key={item?.id}
                  isSelected={item.id === mobileSignup?.secondaryVariant}
                  price={
                    item.id !== mobileSignup?.secondaryVariant
                      ? formatPrice(variantDetails?.monthlyCharge ?? 0)
                      : ''
                  }
                  title={variantDetails?.shortName ?? ''}
                  subtitle={variantDetails?.eesDataVolume ?? ''}
                  shouldHideSubtitle
                  onClick={() => handleSelectedSubscription(item)}
                  isPopular={
                    item.id === 'farsimi-25gb-thjonusta-askrift' ||
                    item.id === 'farsimi-25gb-thjonusta-frelsi'
                  }
                  isDisabled={shouldDisableNetNet && item.id.includes('med-heimanet')}
                  isRecommended={
                    mobileSignup?.selectedQuestionVariant !== undefined &&
                    item.id.includes(mobileSignup?.selectedQuestionVariant)
                  }
                >
                  <Box display="flex" flexDirection="column" width="100%">
                    <MobileSubscriptionInfo
                      monthlyPrice={formatPrice(variantDetails?.monthlyCharge || 0)}
                    />
                    <Box display="flex" width="100%" justifyContent="center" marginTop={2}>
                      <MainButton colorScheme="pink" text="Velja" onClick={() => onSubmit()} />
                    </Box>
                  </Box>
                </Select>
              );
            })}
          </>
        );
    }
  };

  return (
    <Box display="flex" alignItems="center" style={{ minHeight: '1500px' }}>
      <StepsWrapper id={id} title={title}>
        <Modal
          isActive={isntEligable}
          setIsActive={(val) => {
            mobileSignup.setSecondaryVariant('');
            setShouldDisableNetNet(true);
            setIsnitEligable(val);
          }}
        >
          <Box display="flex" gap={1} alignItems="center">
            <Icon icon="warning" color="warning" />
            <Text variant="pLargeBold" color="warning">
              Ekkert heimanet skráð
            </Text>
          </Box>
          <Text variant="pLargeRegular" marginBottom={2} marginTop={2}>
            Þú valdir <span style={{ fontWeight: 'bolder' }}>∞ GB með Heimaneti</span> en það er
            ekkert Heimanet skráð á þessa kennitölu. Viltu fá Heimanet eða velja aðra leið?
          </Text>
          <Box display="flex" flexDirection={{ sm: 'column', lg: 'row' }} gap={2}>
            <SecondaryButton
              onClick={() =>
                window.open(
                  'https://www.nova.is/alltsaman#alltsaman',
                  '_blank',
                  'noopener,noreferrer',
                )
              }
              colorScheme="pink"
              text={'Ég vil heimanet líka'}
              icon="add"
            />
            <SecondaryButton
              onClick={() => {
                mobileSignup.setSecondaryVariant('');
                setShouldDisableNetNet(true);
              }}
              colorScheme="pink"
              text={'Velja aðra leið'}
            />
          </Box>
        </Modal>
        {renderComponents()}
      </StepsWrapper>
    </Box>
  );
};

export default inject(
  'mobileSignup',
  'authentication',
  'cart',
  'signupSteps',
)(observer(SelectSubscription));