import React, { useEffect, useState } from 'react';
import { Box, Grid, GridItem, Icon, Input, LoadingIcon, MainButton, Text } from '@nova-hf/ui';
import { TextInput } from 'frisco';
import { inject, observer } from 'mobx-react';
import MobileSignup from 'store/mobileSignup';
import { StepIds } from 'store/signupSteps';
import { MsisdnType, NumberType, useAvailablePhoneNumbersQuery } from 'typings/graphql';

import { useSignupScroll } from '../hooks/useSignupScroll';

type NumberPotProps = {
  mobileSignup?: MobileSignup;
  id: StepIds;
};
const NumberPot = ({ mobileSignup, id }: NumberPotProps) => {
  if (!mobileSignup) return null;
  const [searchString, setSearchString] = useState<string | undefined>(
    mobileSignup?.simCardPurchaseInfo?.phoneNumber || undefined,
  );
  const [goldNumbers, setGoldNumbers] = useState<(string | undefined)[]>();
  const [normalNumbers, setNormalNumbers] = useState<(string | undefined)[]>();

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

  const {
    data: normalNumberData,
    loading: normalNumberLoading,
    refetch: normalNumberRefetch,
  } = useAvailablePhoneNumbersQuery({
    notifyOnNetworkStatusChange: true,
    fetchPolicy: 'no-cache',
    skip: false,
    variables: {
      input: {
        count: 6,
        type: MsisdnType.Normal,
      },
    },
    onCompleted: (data) => {
      if (data.availablePhoneNumbers) {
        const numbers = data.availablePhoneNumbers.map((item) => {
          if (typeof item?.phoneNumber === 'string') return item.phoneNumber;
        });
        if (numbers) {
          if (mobileSignup.simCardPurchaseInfo.numberType === NumberType.Normal) {
            numbers?.pop();
            numbers?.unshift(mobileSignup.simCardPurchaseInfo.phoneNumber as string);
          }
          setNormalNumbers(numbers);
        }
      }
    },
  });

  const {
    data: goldNumberData,
    loading: goldNumberLoading,
    refetch: goldNumberRefetch,
  } = useAvailablePhoneNumbersQuery({
    notifyOnNetworkStatusChange: true,
    fetchPolicy: 'no-cache',
    variables: {
      input: {
        count: 6,
        type: MsisdnType.Gold,
      },
    },
    onCompleted: (data) => {
      if (data.availablePhoneNumbers) {
        const numbers = data.availablePhoneNumbers.map((item) => {
          if (typeof item?.phoneNumber === 'string') return item.phoneNumber;
        });
        if (numbers) {
          if (mobileSignup.simCardPurchaseInfo.numberType === NumberType.Gold) {
            numbers?.pop();
            numbers?.unshift(mobileSignup.simCardPurchaseInfo.phoneNumber as string);
          }
          setGoldNumbers(numbers);
        }
      }
    },
  });

  const fetchNumbersBySearchString = (searchString: string) => {
    normalNumberRefetch({
      input: {
        count: mobileSignup.simCardPurchaseInfo.numberType === NumberType.Normal ? 5 : 6,
        query: searchString,
        type: MsisdnType.Normal,
      },
    });
    goldNumberRefetch({
      input: {
        count: mobileSignup.simCardPurchaseInfo.numberType === NumberType.Gold ? 5 : 6,
        query: searchString,
        type: MsisdnType.Gold,
      },
    });
  };
  useEffect(() => {
    if (searchString && searchString.length !== 7) {
      fetchNumbersBySearchString(searchString);
    }
  }, [searchString]);

  useEffect(() => {
    if (mobileSignup?.simCardPurchaseInfo?.phoneNumber?.length === 7) {
      setSearchString(mobileSignup.simCardPurchaseInfo.phoneNumber);
    }
  }, [mobileSignup?.simCardPurchaseInfo.phoneNumber]);

  return (
    <Box display="flex" flexDirection="column" width="100%">
      <Box display="flex" flexDirection="column" width="100%">
        <Text variant="pXSmallRegular" color={'grey400'}>
          Sláðu inn upphaf, miðju eða endi númers
        </Text>
        <Box marginTop={1} marginBottom={2}>
          <Input
            autoComplete="tel"
            type="number"
            id={'numeraleit'}
            name={'numeraleit'}
            backgroundColor="grey100"
            placeholder="Númeraleit"
            value={searchString}
            onChange={(e) => setSearchString(e.target.value)}
            trailingElement={<Icon icon="search" color="black100" />}
          />
        </Box>
        <Text variant="pXSmallRegular" color={'grey400'} marginBottom={2}>
          eða veldu eitt af þessu
        </Text>
      </Box>

      <Box display="flex" flexDirection="column">
        <Box display="flex" justifyContent="space-between">
          <Box display="flex" justifyContent={'flex-start'}>
            <Text variant="pSmallBold">Silfurnúmer</Text>
            <Text variant="pSmallRegular" marginLeft={1}>
              {'(1.990 kr)'}
            </Text>
          </Box>
          <Box renderAs="button" onClick={() => normalNumberRefetch()}>
            <Icon color="grey600" icon={'refresh'} />
          </Box>
        </Box>
        <Box minHeight={13} marginTop={1} marginBottom={2}>
          {normalNumberLoading ? (
            <Box display="flex" justifyContent="center" alignItems="center">
              <LoadingIcon size={64} color="pink" />
            </Box>
          ) : (
            <Grid gridTemplate={{ sm: 3 }} rowGap={1} columnGap={1}>
              {!normalNumberData?.availablePhoneNumbers?.length && (
                <GridItem gridColumn={{ sm: 'span3' }}>
                  <Box
                    display="flex"
                    justifyContent="center"
                    alignItems="center"
                    width="100%"
                    height="100%"
                    minHeight={10}
                  >
                    <Text variant="pLargeRegular" textAlign="center" color="grey500">
                      Ekki er til silfurnúmer með þessari númerarunu
                    </Text>
                  </Box>
                </GridItem>
              )}
              {normalNumbers?.map((item) => {
                if (!item) return null;
                return (
                  <GridItem key={item} gridColumn={{ sm: 'span1' }}>
                    <Box
                      renderAs="button"
                      onClick={() => mobileSignup?.setSelectedNumer(item, NumberType.Normal)}
                      display="flex"
                      justifyContent={'center'}
                      alignItems={'center'}
                      color={
                        item === mobileSignup?.simCardPurchaseInfo.phoneNumber
                          ? 'white'
                          : 'black100'
                      }
                      backgroundColor={
                        item === mobileSignup?.simCardPurchaseInfo.phoneNumber ? 'pink' : 'grey300'
                      }
                      marginY={0}
                      style={{
                        borderRadius: '8px',
                        paddingTop: '12px',
                        paddingBottom: '12px',
                      }}
                      paddingX={2}
                      width="100%"
                    >
                      <Text marginBottom={0} marginTop={0}>
                        {item}
                      </Text>
                    </Box>
                  </GridItem>
                );
              })}
            </Grid>
          )}
        </Box>
      </Box>
      <Box display="flex" flexDirection="column">
        <Box display="flex" justifyContent="space-between">
          <Box display="flex" justifyContent={'flex-start'}>
            <Text variant="pSmallBold">Gullnúmer</Text>
            <Text variant="pSmallRegular" marginLeft={1}>
              {'(5.990 kr)'}
            </Text>
          </Box>
          <Box renderAs="button" onClick={() => goldNumberRefetch()}>
            <Icon color="grey600" icon={'refresh'} />
          </Box>
        </Box>
        <Box minHeight={13} marginTop={1}>
          {goldNumberLoading ? (
            <Box display="flex" justifyContent="center" alignItems="center">
              <LoadingIcon size={64} color="pink" />
            </Box>
          ) : (
            <Grid gridTemplate={{ sm: 3 }} rowGap={1} columnGap={1}>
              {!goldNumberData?.availablePhoneNumbers?.length && (
                <GridItem gridColumn={{ sm: 'span3' }}>
                  <Box
                    display="flex"
                    justifyContent="center"
                    alignItems="center"
                    width="100%"
                    height="100%"
                    minHeight={10}
                  >
                    <Text variant="pLargeRegular" textAlign="center" color="grey500">
                      Ekki er til gullnúmer með þessari númerarunu
                    </Text>
                  </Box>
                </GridItem>
              )}
              {goldNumbers?.map((item) => {
                if (!item) return null;
                return (
                  <GridItem key={item} gridColumn={{ sm: 'span1' }}>
                    <Box
                      renderAs="button"
                      onClick={() => mobileSignup?.setSelectedNumer(item, NumberType.Gold)}
                      display="flex"
                      justifyContent={'center'}
                      alignItems={'center'}
                      color={
                        item === mobileSignup?.simCardPurchaseInfo.phoneNumber
                          ? 'white'
                          : 'black100'
                      }
                      backgroundColor={
                        item === mobileSignup?.simCardPurchaseInfo.phoneNumber ? 'pink' : 'grey300'
                      }
                      style={{
                        borderRadius: '8px',
                        paddingTop: '12px',
                        paddingBottom: '12px',
                      }}
                      width="100%"
                      paddingX={2}
                    >
                      <Text marginBottom={0} marginTop={0}>
                        {item}
                      </Text>
                    </Box>
                  </GridItem>
                );
              })}
            </Grid>
          )}
          {mobileSignup?.simCardPurchaseInfo.phoneNumber && (
            <Box marginTop={2}>
              <MainButton
                colorScheme="pink"
                text={`Velja ${mobileSignup?.simCardPurchaseInfo.phoneNumber}`}
                onClick={() => onComplete()}
              />
            </Box>
          )}
        </Box>
      </Box>
    </Box>
  );
};

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