import React, { useState } from 'react';
import { Box, Empty, MainButton, Text, ThemeColorType } from '@nova-hf/ui';
import { InputMessage } from 'frisco';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { MobileSignupProducts } from 'store/mobileSignup';
import {
  MsisdnType,
  useAvailablePhoneNumbersLazyQuery,
  useIsEligibleForNetNetQuery,
} from 'typings/graphql';
import { formatPrice, signupScroll } from 'utils/helpers';

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

import StepsWrapper from './StepsWrapper';

const findMobileServiceProductText = (product: MobileSignupProducts) => {
  switch (product) {
    case MobileSignupProducts.Askrift:
      return 'Áskrift';
    case MobileSignupProducts.Frelsi:
      return 'Frelsi';
    case MobileSignupProducts.Stakt:
      return 'Stök áfylling';
    case MobileSignupProducts.Fyrirtaeki:
      return 'Fyrirtækjasími';
    case MobileSignupProducts.Netkort:
      return '5G Netkort';
    case MobileSignupProducts.M2M:
      return 'M2M Netkort';
    default:
      break;
  }
};

const RenderNameAndPrice = ({
  name,
  price,
  isMonthly,
}: {
  name: string;
  price: number;
  isMonthly: boolean;
}) => (
  <Box display="flex" justifyContent="space-between">
    <Text variant="pMediumBold" color="pink">
      {name}
    </Text>
    <Box display="flex">{!!price && <RenderPrice price={price} isMonthly={isMonthly} />}</Box>
  </Box>
);

const RenderPrice = ({ price, isMonthly }: { price: number; isMonthly: boolean }) => (
  <>
    <Text variant="pMediumBold">{formatPrice(price)}</Text>
    {isMonthly && (
      <Text variant="pMediumRegular" color="grey400">
        {'/mán'}
      </Text>
    )}
  </>
);
const MobileSignupCartOverview = ({
  title,
  id,
  mobileSignup,
  signupSteps,
  authentication,
  cart,
}: MobileChildrenProps) => {
  if (!mobileSignup || !authentication?.isTokenValid) return null;
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const isLastStep = signupSteps?.arePreviousStepsComplete(id);
  const firstUnfinished = signupSteps?.getFirstIncompleteStepBefore(id);

  const borderColor: ThemeColorType = 'grey300';
  const [errorMessage, setErrorMessage] = useState('');

  const [availableNumber] = useAvailablePhoneNumbersLazyQuery({
    fetchPolicy: 'no-cache',
  });

  const { data, loading } = useIsEligibleForNetNetQuery({
    variables: { input: { id: cart?.customerId || authentication.customerId } },
  });

  const onSubmit = async () => {
    if (!cart?.nationalId && authentication?.loggedInUserSsn) {
      cart?.setNationalId(authentication.loggedInUserSsn);
    }
    setIsLoading(true);

    const number = await availableNumber({
      variables: {
        input: {
          query: mobileSignup.simCardPurchaseInfo.phoneNumber,
          type: MsisdnType.All,
          count: 1,
        },
      },
    });

    if (
      number.data?.availablePhoneNumbers?.length === 0 &&
      mobileSignup.servicePurchaseInfo.service.isNewNumber &&
      !mobileSignup.isUpdatingSubscription
    ) {
      setErrorMessage('Númerið sem er valið er nú þegar frátekið');
      setIsLoading(false);
      return;
    }
    if (mobileSignup?.updatingCartItem) {
      await mobileSignup?.updateItems(mobileSignup?.updatingCartItem);
    } else {
      await mobileSignup?.addAllToCart();
    }
    mobileSignup?.clearCookie();
    signupSteps?.markStepComplete(id);

    if (signupSteps?.currentStepId === signupSteps?.steps[0].id) {
      signupSteps?.resetStepsToKarfaStep();
    }
    if (signupSteps?.nextStepId) signupSteps?.setCurrentStep(signupSteps.nextStepId);
    router.push('/farsimi/yfirlit');

    setIsLoading(false);
  };

  const findVariantNameAndPrice = () => {
    if (mobileSignup?.getVariantPrice(mobileSignup.secondaryVariant)) {
      return (
        <RenderNameAndPrice
          name={
            findMobileServiceProductText(
              mobileSignup?.selectedSubscriptionType ?? MobileSignupProducts.Frelsi,
            ) ?? ''
          }
          price={mobileSignup.getVariantPrice(mobileSignup.secondaryVariant) ?? 0}
          isMonthly
        />
      );
    }

    if (
      mobileSignup.selectedSubscriptionType === MobileSignupProducts.Fyrirtaeki ||
      mobileSignup.selectedSubscriptionType === MobileSignupProducts.Netkort ||
      mobileSignup.selectedSubscriptionType === MobileSignupProducts.M2M
    ) {
      const selectedSubscriptionTypeTitle =
        mobileSignup.selectedSubscriptionType === MobileSignupProducts.Fyrirtaeki
          ? 'Fyrirtækjasími'
          : mobileSignup.selectedSubscriptionType === MobileSignupProducts.Netkort
          ? '5G Netkort'
          : 'M2M Netkort';
      if (mobileSignup.selectedRequiredOption?.monthlyCharge) {
        return (
          <RenderNameAndPrice
            name={selectedSubscriptionTypeTitle}
            price={mobileSignup.selectedRequiredOption?.monthlyCharge ?? 0}
            isMonthly
          />
        );
      }
      if (mobileSignup.selectedRequiredOption?.price) {
        return (
          <RenderNameAndPrice
            name={selectedSubscriptionTypeTitle}
            price={mobileSignup.selectedRequiredOption.price ?? 0}
            isMonthly={false}
          />
        );
      } else {
        return (
          <RenderNameAndPrice name={selectedSubscriptionTypeTitle} price={0} isMonthly={false} />
        );
      }
    }
  };

  const findSecondaryVariantNameAndPrice = () => {
    if (mobileSignup.getVariantName(mobileSignup.secondaryVariant)) {
      return mobileSignup.getVariantName(mobileSignup.secondaryVariant);
    } else {
      return mobileSignup.selectedRequiredOption?.name;
    }
  };
  const secondaryVariantIncludesHeimanet = mobileSignup.secondaryVariant.includes('med-heimaneti');
  const isNotAllowedNetNet =
    secondaryVariantIncludesHeimanet &&
    !mobileSignup.isEligibleForNetNet &&
    !data?.isEligibleForNetNet &&
    (cart?.customerId || authentication?.customerId);

  return (
    <StepsWrapper
      id={id}
      title={title}
      isJumboTitle
      subtitle={'Þú ert svo sannarlega allur pakkinn!'}
    >
      {(isLastStep || mobileSignup.isUpdatingSubscription) && (
        <Box
          display="flex"
          flexDirection="column"
          borderRadius="medium"
          borderWidth="1px"
          borderStyle={'solid'}
          borderColor={borderColor}
          paddingX={3}
        >
          {!!mobileSignup?.simCardPurchaseInfo.phoneNumber && (
            <Box paddingY={3} borderBottomStyle="solid" borderColor={borderColor} borderWidth="1px">
              <Text variant="h6">{mobileSignup?.simCardPurchaseInfo.phoneNumber}</Text>
            </Box>
          )}
          <Box
            display="flex"
            flexDirection="column"
            borderBottomStyle="solid"
            borderColor={borderColor}
            borderWidth="1px"
            paddingY={3}
          >
            {findVariantNameAndPrice()}
            <Box>{findSecondaryVariantNameAndPrice()}</Box>
          </Box>

          {mobileSignup?.extraVariants.map((item) => {
            if (item === 'plast-sim' || item === 'e-sim' || item === 'simanumer-netnumer')
              return null;
            return (
              <Box
                key={item}
                display="flex"
                justifyContent="space-between"
                borderBottomStyle="solid"
                borderColor={borderColor}
                borderWidth="1px"
                paddingY={3}
              >
                <Text color="pink" variant="pMediumBold">
                  {mobileSignup.getVariantName(item)}
                </Text>
                {mobileSignup?.getVariantPrice(item) > 0 && (
                  <Box display="flex" alignItems="center">
                    <Text variant="pMediumBold">
                      {formatPrice(mobileSignup?.getVariantPrice(item))}
                    </Text>
                    <Text variant="pMediumRegular" color="grey400">
                      {'/mán'}
                    </Text>
                  </Box>
                )}
              </Box>
            );
          })}
          <Box display="flex" flexDirection="column" paddingY={3}>
            <MainButton
              colorScheme="pink"
              text={'Setja í körfu'}
              onClick={onSubmit}
              isLoading={isLoading || loading}
              isDisabled={
                (!isLastStep && !mobileSignup.isUpdatingSubscription) || !!isNotAllowedNetNet
              }
            />
          </Box>
        </Box>
      )}

      {!isLastStep && !mobileSignup.isUpdatingSubscription && (
        <Box
          display="flex"
          flexDirection="column"
          borderRadius="medium"
          borderWidth="1px"
          borderStyle={'solid'}
          borderColor={borderColor}
          padding={3}
        >
          <Empty
            icon="basket"
            title="Karfan er tóm!"
            subtitle={`Kláraðu skrefið "${firstUnfinished?.title}" til þess að geta haldið áfram!`}
          />
          <MainButton
            colorScheme="pink"
            text="Til baka í skref"
            onClick={() => signupScroll(`#${firstUnfinished?.id}`)}
          />
        </Box>
      )}
      {!!errorMessage && (
        <Box marginTop={2}>
          <InputMessage status="Error" text={errorMessage} />
        </Box>
      )}
      {secondaryVariantIncludesHeimanet && !data?.isEligibleForNetNet && !loading && (
        <Box marginTop={2}>
          <InputMessage status="Error" text="Viðskiptavinur á ekki rétt á þessari þjónustuleið" />
        </Box>
      )}
    </StepsWrapper>
  );
};

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