import React, { useEffect, useRef, useState } from 'react';
import {
  Box,
  Checkbox,
  FormStatusMessage,
  Input,
  LoadingIcon,
  MainButton,
  Text,
} from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';
import { throwErrorWithMessage } from 'store/mobileSignup';
import { useCustomerInfoByNationalIdLazyQuery } from 'typings/graphql';
import { formatNationalId, isCompany } from 'utils/helpers';

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

import StepsWrapper from './StepsWrapper';

const Payer = ({ id, title, cart, mobileSignup, signupSteps }: MobileChildrenProps) => {
  if (!mobileSignup) return null;

  const [userNationalId, setUserNationalId] = useState(cart?.nationalId || '');
  const [errorMessage, setErrorMessage] = useState('');
  const [getCustomerId] = useCustomerInfoByNationalIdLazyQuery();
  const [isOskradFrelsi, setIsOskradFrelsi] = useState(false);
  const [isLoadingCustomer, setIsLoadingCustomer] = useState(false);
  const isNationalIdFilledIn = !!cart?.customerName;
  const { onComplete } = useSignupScroll({ id });
  const inputRef = useRef<HTMLInputElement>(null);
  const submitButtonRef = useRef<HTMLButtonElement>(null);

  const onSubmit = () => {
    if (mobileSignup?.steps) {
      if (isOskradFrelsi || cart?.customerName) {
        mobileSignup?.setIsOskrad(isOskradFrelsi);
        mobileSignup?.setIsCompany(isCompany(userNationalId));
        if (isOskradFrelsi) {
          cart?.setCustomerId('');
        }
        onComplete();
      }
    }
  };

  const onClearInput = () => {
    setUserNationalId('');
  };

  useEffect(() => {
    // focus on input box when step is active
    if (inputRef.current && signupSteps?.currentStepId === id) {
      inputRef.current.focus();
    }
  }, [signupSteps?.currentStepId]);
  useEffect(() => {
    // focus on submit button when kennitala is ok
    if (cart?.customerId && userNationalId.length === 10 && submitButtonRef.current) {
      submitButtonRef.current.focus();
    }
  }, [cart?.customerId]);

  useEffect(() => {
    if (userNationalId.length !== 10 && cart?.customerId) {
      cart?.setCustomerId('');
      cart?.setCustomerName('');
    }
    if (userNationalId.length === 10) {
      (async () => {
        setIsLoadingCustomer(true);
        try {
          const { data, error } = await getCustomerId({
            variables: { input: { nationalId: userNationalId } },
          });

          if (!data?.customerByNationalId || error) {
            const errorMessage = `Ekki fannst viðskiptavinur með kennitölu ${formatNationalId(
              userNationalId,
            )}`;
            setErrorMessage(errorMessage);
          }
          if (data?.customerByNationalId?.id) {
            cart?.setCustomerId(data.customerByNationalId.id);
            cart?.setNationalId(userNationalId);
            cart?.setCustomerName(data.customerByNationalId?.name ?? '');
            cart?.setCustomerAddress(
              data.customerByNationalId.legalEntity?.__typename === 'Person'
                ? data.customerByNationalId.legalEntity?.address ?? ''
                : '',
            );
          }
          mobileSignup?.setIsOskrad(isOskradFrelsi);
        } catch (e) {
          setIsLoadingCustomer(false);
          setErrorMessage('Ekki tókst að sækja kennitölu');
          throwErrorWithMessage(e, 'Failed to get CustomerId');
        } finally {
          setIsLoadingCustomer(false);
        }

        return; // do not execute next step yet
      })();
    }
  }, [userNationalId]);

  const onInputChange = (value: string) => {
    setErrorMessage('');
    if (value.length > 10) {
      // because staff copy pastes national ids from elsewhere so we should strip the empty spaces and the hyphen
      const cleaned = value.replace(/[-\s]/g, '');
      setUserNationalId(cleaned);
      if (cleaned.length > 10) {
        setErrorMessage('Kennitala of löng');
      }
    } else setUserNationalId(value);
  };

  return (
    <StepsWrapper id={id} title={title} subtitle="Kennitala þess sem fær reikninginn.">
      {!isOskradFrelsi && (
        <Input
          ref={inputRef}
          onChange={(e) => onInputChange(e?.target.value)}
          id={'payerNationalId'}
          name={'payerNationalId'}
          disabled={isLoadingCustomer}
          onClick={() => onClearInput()}
          placeholder={'Kennitala'}
          autoComplete="national-id"
          backgroundColor="grey100"
          value={userNationalId}
          {...(isLoadingCustomer && {
            trailingElement: (
              <Box marginLeft={1}>
                <LoadingIcon color="pink" />
              </Box>
            ),
          })}
        />
      )}
      {isLoadingCustomer && <FormStatusMessage status="loading" message="Sæki viðskiptavin" />}

      {!!errorMessage && <FormStatusMessage message={errorMessage} status="error" />}
      {cart?.customerName && userNationalId?.length === 10 && !isOskradFrelsi && (
        <Box display="flex" flexDirection="column" marginTop={3} marginBottom={2}>
          <Text variant="pLargeBold" color="grey700">
            {cart.customerName}
          </Text>
          {cart?.customerAddress && userNationalId?.length === 10 && (
            <Text variant="pMediumRegular" color="grey700">
              {cart.customerAddress}
            </Text>
          )}
        </Box>
      )}
      <Box display="flex" flexDirection="column" gap={0} alignItems="flex-start">
        <Box marginY={2} marginLeft={1} gap={1}>
          <Checkbox
            type="checked"
            isChecked={isOskradFrelsi}
            label="Óskráð frelsi"
            onChange={() => setIsOskradFrelsi(!isOskradFrelsi)}
          />
          {isOskradFrelsi && (
            <Text variant="pSmallRegular" color="grey700" style={{ fontStyle: 'italic' }}>
              Psst. Óskráð frelsi virkar bara á Íslandi, svo ef þú ert í ferðahug þá þarf að skrá
              númerið.
            </Text>
          )}
        </Box>

        {(isOskradFrelsi || isNationalIdFilledIn) && (
          <Box width="100%">
            <MainButton
              ref={submitButtonRef}
              text="Áfram"
              colorScheme="pink"
              buttonHeight={8}
              onClick={() => onSubmit()}
            />
          </Box>
        )}
      </Box>
    </StepsWrapper>
  );
};

export default inject('cart', 'mobileSignup', 'signupSteps')(observer(Payer));