import React from 'react';
import { QRCode } from 'react-qrcode-logo';
import { Box, Text, useViewport } from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';

import Button from '../../../frisco/Button/Button';
import { useEsimQuery } from '../../../typings/graphql';
import { MobileChildrenProps } from '../kaupa/StepSetup';

import StepsWrapper from './StepsWrapper';

const ActivationMethod = ({ title, id, mobileSignup }: MobileChildrenProps) => {
  const router = useRouter();
  const phoneNumber = router?.query?.phoneNumber;
  const { isSmall } = useViewport();
  const isMobile = isSmall;

  const { data: esimData } = useEsimQuery({
    variables: {
      input: {
        phoneNumber: phoneNumber?.toString() ?? '',
      },
    },
    skip: !phoneNumber,
  });

  const handleActivateNow = (deviceType: string) => {
    if (deviceType === 'iphone' && esimData?.esim?.qrString) {
      const encoded = encodeURIComponent(esimData.esim.qrString);
      window.location.href = `https://esimsetup.apple.com/esim_qrcode_provisioning?carddata=${encoded}`;
    }
  };

  const qrOnly = mobileSignup?.deviceType === 'android' || !isMobile;

  return (
    <StepsWrapper id={id} title={title} isFirstStep={true}>
      {mobileSignup?.activateOnAnotherDevice || qrOnly ? (
        <Box
          width="100%"
          height="100%"
          display="flex"
          flexDirection="column"
          alignItems="center"
          justifyContent="center"
          gap={3}
        >
          <Text variant="subHeading">Virkja eSim</Text>
          <Box alignItems="center" display="flex" flexDirection="column">
            <Text color="grey600" variant="pLargeRegular">
              Skannaðu kóðann
            </Text>
            <Text color="grey600" variant="pLargeRegular">
              með símanum.
            </Text>
          </Box>
          <QRCode
            value={esimData?.esim?.qrString ?? ''}
            logoImage="/assets/nova-qr-logo.png"
            qrStyle="dots"
          />
        </Box>
      ) : (
        <Box alignItems="center" display="flex" flexDirection="column" gap={3}>
          <Text variant="subHeading">Smelltu hér að neðan</Text>
          <Button
            backgroundColor="white"
            textColor="pink"
            borderColor="pink"
            text="Virkja eSIM"
            onClick={() => handleActivateNow(mobileSignup?.deviceType ?? '')}
            textVariant="button"
          ></Button>
        </Box>
      )}
    </StepsWrapper>
  );
};

export default inject('mobileSignup')(observer(ActivationMethod));