import React, { useEffect, useState } from 'react';
import { Box, FormStatusMessage, Input, MainButton } from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';
import { useSimcardStatusLazyQuery } from 'typings/graphql';

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

type CheckIccidProps = Pick<MobileChildrenProps, 'mobileSignup' | 'id'>;
const CheckIccid = ({ mobileSignup, id }: CheckIccidProps) => {
  if (!mobileSignup) return null;
  const [iccid, setIccid] = useState('');
  const [isIccidAvailable, setIsIccidAvailable] = useState<boolean | undefined>(undefined);
  const [errorMessage, setErrorMessage] = useState('');

  const { onComplete } = useSignupScroll({ id });

  const [getIccidStatus] = useSimcardStatusLazyQuery();

  const successText = 'Hreint Iccid';

  const onSubmit = async (iccid: string) => {
    if (isIccidAvailable) {
      onComplete();
    } else {
      const { data } = await getIccidStatus({
        variables: {
          input: {
            iccid,
          },
        },
      });

      const simcard = data?.simcard;
      const iccidIsAvailable = !simcard?.abandoned && !simcard?.sold;
      if (!simcard) {
        setIsIccidAvailable(false);
        setErrorMessage('Villa við að sækja simkort upplýsingar');
      } else if (iccidIsAvailable) {
        setIsIccidAvailable(true);
        mobileSignup?.setIccid(iccid);
      } else {
        if (simcard.abandoned && !simcard.sold) {
          setErrorMessage('Iccid Abandoned');
        } else if (simcard.sold && !simcard.abandoned) {
          setErrorMessage('Iccid already sold');
        } else {
          setErrorMessage('Iccid sold and abandoned');
        }
        setIsIccidAvailable(false);
      }
    }
  };

  useEffect(() => {
    if (iccid.length === 19) {
      onSubmit(iccid);
    } else {
      setIsIccidAvailable(undefined);
      mobileSignup?.setIccid('');
    }
  }, [iccid]);
  return (
    <Box width="100%">
      <Input
        id={'iccid'}
        name={'iccid'}
        onChange={(e) => setIccid(e?.target.value ?? '')}
        disabled={iccid.length !== 19}
        placeholder={'ICCID'}
        value={iccid}
        onClick={() => onSubmit(iccid)}
        trailingElement={
          <MainButton
            colorScheme="pink"
            text={!isIccidAvailable ? 'Staðfesta' : 'Áfram'}
            onClick={() => onSubmit(iccid)}
          />
        }
      />
      <FormStatusMessage
        status={isIccidAvailable ? 'success' : 'error'}
        message={isIccidAvailable ? successText : errorMessage}
      />
    </Box>
  );
};

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