import React from 'react';
import { Box, Grid, GridItem, Icon, MainButton, NumberInput, Text, makeToast } from '@nova-hf/ui';
import { PaymentTypeV2, useAddPaymentMethodMutation } from 'typings/graphql';
import { useTranslation } from 'beta/utils/i18n';

type BankClaimProps = {
  customerId: string;
  nationalId: string;
  closeModal?: () => void;
};

const AddBankClaim = ({ customerId, nationalId }: BankClaimProps) => {
  const { t } = useTranslation('payments');

  const [addPaymentMethod, { loading: mutationLoading, error: mutationError }] =
    useAddPaymentMethodMutation();

  const onSubmitNew = async () => {
    try {
      const { data: addPaymentMethodData } = await addPaymentMethod({
        variables: {
          input: {
            customerId,
            nationalId,
            type: PaymentTypeV2.BankClaim,
          },
        },
      });
      if (!addPaymentMethodData || mutationError) {
        makeToast.danger(t('bankClaim.addFail'), '');
      }
      if (addPaymentMethodData?.addPaymentMethod?.id) {
        makeToast.success(t('bankClaim.added'), '');
      }
    } catch (error) {
      if (error instanceof Error) makeToast.danger(t('bankClaim.addFail'), error.message);
    }
  };

  return (
    <>
      <Grid rowGap={{ lg: 9 }} gridTemplate={2}>
        <GridItem gridColumn={{ sm: 'span2' }}>
          <Box
            display="flex"
            flexDirection="row"
            alignItems="center"
            justifyContent="flex-start"
            gap={2}
          >
            <Icon color={'pink'} icon="addCreditcard" size={48} viewBox={24} />
            <Text variant="h6">{t('bankClaim.title')}</Text>
          </Box>
        </GridItem>
        <GridItem gridColumn={{ sm: 'span2' }}>
          <Box marginY={2}>
            <NumberInput
              label={t('bankClaim.kennitala')}
              numberType="nationalId"
              value={nationalId || ''}
              name={'kennitala'}
              disabled={true}
              id={'kennitala'}
            />
          </Box>
        </GridItem>
      </Grid>
      <Box marginLeft="auto" marginTop={15} width={{ sm: '100%', md: '6/12', xl: '3/12' }}>
        <MainButton
          icon="longArrowRight"
          text={t('bankClaim.confirm')}
          onClick={onSubmitNew}
          isLoading={mutationLoading}
        />
      </Box>
    </>
  );
};

export default AddBankClaim;