import React, { useEffect, useState } from 'react';
import { Text } from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';
import MobileSignup from 'store/mobileSignup';

import Cart from '../../../store/cart';
import { useCustomerNameByNationalIdQuery } from '../../../typings/graphql';

type UserTextProps = {
  mobileSignup?: MobileSignup;
  cart?: Cart;
  cartItem?: string;
};

const UserText = ({ mobileSignup, cart, cartItem }: UserTextProps) => {
  const [nationalId, setNationalId] = useState('');

  const getNationalId = async () => {
    const nationalId = await mobileSignup?.getRightHolder(cartItem ?? '');
    if (nationalId) {
      setNationalId(nationalId);
    } else {
      setNationalId(cart?.nationalId ?? '');
    }
  };

  const { data } = useCustomerNameByNationalIdQuery({
    variables: {
      input: {
        nationalId: nationalId ?? '',
      },
    },
    skip: !nationalId,
  });

  useEffect(() => {
    getNationalId();
  }, []);

  return (
    <Text color="grey700" variant="pMediumRegular">
      {data?.customerByNationalId?.name}
    </Text>
  );
};

export default inject('mobileSignup', 'cart')(observer(UserText));