import React, { useEffect, useState } from 'react';
import { Box, Icon, MainButton, Text } from '@nova-hf/ui';
import { Select } from 'frisco';
import Modal from 'frisco/Modal/Modal';
import { inject, observer } from 'mobx-react';
import Image from 'next/image';
import { MobileSignupProducts } from 'store/mobileSignup';
import { SimCardType } from 'typings/graphql';

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

import CheckIccid from './CheckIccid';
import StepsWrapper from './StepsWrapper';

const SelectSimType = ({ id, title, mobileSignup, authentication }: MobileChildrenProps) => {
  if (!mobileSignup || !authentication?.isTokenValid) return null;
  const [isActive, setIsActive] = useState(false);
  const { onComplete } = useSignupScroll({ id });

  const simType = mobileSignup?.simCardPurchaseInfo.simCardType;
  const hasIccid = mobileSignup?.simCardPurchaseInfo.iccid;
  const isNetnumer =
    mobileSignup?.selectedSubscriptionType == MobileSignupProducts.M2M ||
    mobileSignup?.selectedSubscriptionType === MobileSignupProducts.Netkort;
  const addSimcardTypeToPurchaseInfo = (simcardType: SimCardType) => {
    mobileSignup?.setSimCardType(simcardType);
  };

  useEffect(() => {
    if (isNetnumer) {
      addSimcardTypeToPurchaseInfo(SimCardType.Plastic);
    }
  }, [isNetnumer]);

  return (
    <StepsWrapper id={id} title={title}>
      {isNetnumer ? (
        <Select
          isSelected={simType === SimCardType.Plastic}
          title={'Venjulegt plastkort'}
          subtitle="Ef síminn styður ekki eSIM. Þú getur sótt eða fengið sent."
          onClick={() => addSimcardTypeToPurchaseInfo(SimCardType.Plastic)}
          emoji={'plastkort'}
        >
          {authentication?.isStaff && authentication.staffInStore && <CheckIccid id={id} />}
        </Select>
      ) : (
        <>
          <Select
            openAtAllTimes
            isSelected={simType === SimCardType.ESim}
            title={'eSim'}
            subtitle="eSIM er nýjasta tækni og þú getur virkjað það strax. Ekkert hikst."
            onClick={() => addSimcardTypeToPurchaseInfo(SimCardType.ESim)}
            emoji={'e-simkort'}
          >
            <Box
              display="flex"
              alignItems="center"
              gap="0.5"
              paddingX={4}
              renderAs="button"
              onClick={() => setIsActive(true)}
              color={'pink'}
            >
              <Icon icon="info" size={16} />
              <Text
                variant="pSmallRegular"
                marginBottom={0}
                marginTop={0}
                style={{ textDecoration: 'underline' }}
              >
                Hvað með rafrænu skilríkin?
              </Text>
            </Box>
          </Select>
          <Select
            isSelected={simType === SimCardType.Plastic}
            title={'Venjulegt plastkort'}
            subtitle="Ef síminn styður ekki eSIM. Þú getur sótt eða fengið sent."
            onClick={() => addSimcardTypeToPurchaseInfo(SimCardType.Plastic)}
            emoji={'plastkort'}
          >
            {authentication?.isStaff && authentication.staffInStore && <CheckIccid id={id} />}
          </Select>
        </>
      )}

      <Box>
        <MainButton
          isDisabled={
            typeof simType === 'undefined' ||
            (simType === SimCardType.Plastic &&
              !hasIccid &&
              authentication?.isStaff &&
              authentication.staffInStore)
          }
          colorScheme="pink"
          text={'Velja'}
          onClick={() => onComplete()}
        />
      </Box>
      <Modal isActive={isActive} setIsActive={setIsActive}>
        <Modal.Header
          title="Hvað er eSIM?"
          subtitle="eSIM er þægilegasta leiðin til að virkja símanúmer"
        />
        <Box display="flex" flexDirection="column">
          <ESimInfo
            emoji="🚀"
            title={'Virkar strax'}
            description={
              'eSIM er stafrænt svo þú virkjar það á örfáum sekúndum og heldur svo bara áfram með lífið.'
            }
          />
          <ESimInfo
            emoji="🪪"
            title={'Rafræn skilríki án fyrirhafnar'}
            description={
              'Auðkennisappið er rafræn skilríki sem virka strax og þú þarft ekki að fara neitt til að virkja þau'
            }
            isAudkenni
          />
          <ESimInfo
            emoji="😌"
            title={'Virkar á flöstum símum'}
            description={
              'Allir iPhone XS/XR og nýrri styða eSIM. Sömuleiðis Samsung Galaxy S20 og nýrri'
            }
          />
          <MainButton colorScheme={'pink'} text={'Loka'} onClick={() => setIsActive(false)} />
        </Box>
      </Modal>
    </StepsWrapper>
  );
};

type EsimInfoProps = {
  emoji: string;
  title: string;
  description: string;
  isAudkenni?: boolean;
};

const ESimInfo = ({ emoji, title, description, isAudkenni = false }: EsimInfoProps) => {
  return (
    <Box display="flex" marginBottom={5} paddingRight={6}>
      <Box display="flex" alignItems="flex-start" marginRight={2} style={{ fontSize: '40px' }}>
        {emoji}
      </Box>
      <Box display="flex" flexDirection="column">
        <Text variant="pLargeBold">{title}</Text>
        <Text variant="pSmallRegular" marginTop={1} marginBottom={1} color={'grey600'}>
          {description}
        </Text>
        {isAudkenni && (
          <Image
            src={require('assets/images/mobile-signup/audkenni-with-text.png').default.src}
            alt={'Auðkenni app icon'}
            width={170}
            height={25}
          />
        )}
      </Box>
    </Box>
  );
};

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