import React, { useEffect, useState } from 'react';
import { Button, Select } from 'frisco';
import { inject, observer } from 'mobx-react';
import { MobileSignupProducts } from 'store/mobileSignup';

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

import NumberPot from './NumberPot';
import StepsWrapper from './StepsWrapper';
import TransferNumber from './TransferNumber';

const StepNumberFour = ({ id, title, mobileSignup, authentication }: MobileChildrenProps) => {
  if (!authentication?.isTokenValid) return null;
  const [showMoveNumber, setshowMoveNumber] = useState(false);
  const [showNumberPot, setShowNumberPot] = useState(false);
  const { onComplete } = useSignupScroll({ id });

  const isNetnumer =
    mobileSignup?.selectedSubscriptionType == MobileSignupProducts.M2M ||
    mobileSignup?.selectedSubscriptionType === MobileSignupProducts.Netkort;
  useEffect(() => {
    const isNewNumber = mobileSignup?.servicePurchaseInfo.service?.isNewNumber;

    if (mobileSignup?.isUpdatingSubscription) {
      if (isNewNumber) {
        setShowNumberPot(true);
      } else {
        setshowMoveNumber(true);
      }
    }
  }, []);

  const isPortIn = !mobileSignup?.servicePurchaseInfo.service.isNewNumber;
  return (
    <StepsWrapper title={title} id={id}>
      {isNetnumer ? (
        <>
          <Select
            isSelected={true}
            title="Netnúmer"
            subtitle="Með netkorti fylgir netnúmer fyrir tækið þitt!"
          />
          <Button
            backgroundColor={'pink'}
            text={'Velja'}
            textVariant={'button'}
            onClick={() => onComplete()}
          />
        </>
      ) : (
        <>
          <Select
            isSelected={showMoveNumber}
            isDisabled={mobileSignup?.isUpdatingSubscription}
            onClick={() => {
              setshowMoveNumber(true);
              setShowNumberPot(false);
            }}
            title="Flytja númer"
            subtitle="Áttu númer sem þú vilt einfaldlega færa yfir í nova?"
            emoji="numeraflutningur"
            shouldHideSubtitle={false}
          >
            <TransferNumber id={id} />
          </Select>
          <Select
            isSelected={showNumberPot}
            title={'Nýtt númer'}
            subtitle="Viltu fá nýtt númer hjá Nova"
            onClick={() => {
              setShowNumberPot(true);
              setshowMoveNumber(false);
            }}
            emoji="nytt-numer"
            isDisabled={mobileSignup?.isUpdatingSubscription && isPortIn}
          >
            <NumberPot id={id} />
          </Select>
        </>
      )}
    </StepsWrapper>
  );
};

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