import { useEffect, useState, type ReactElement } from 'react';
import { Indicator } from '@mantine/core';
import { ChargesTableAmountFieldsFragmentDoc } from '../../../gql/graphql.js';
import { getFragmentData, type FragmentType } from '../../../gql/index.js';

// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
/* GraphQL */ `
  fragment ChargesTableAmountFields on Charge {
    __typename
    id
    totalAmount {
      raw
      formatted
    }
    ... on CreditcardBankCharge {
      validCreditCardAmount
    }
  }
`;

type Props = {
  data: FragmentType<typeof ChargesTableAmountFieldsFragmentDoc>;
};

export const Amount = ({ data }: Props): ReactElement => {
  const charge = getFragmentData(ChargesTableAmountFieldsFragmentDoc, data);
  const [isValid, setIsValid] = useState(true);
  const [isValidating, setIsValidating] = useState(true);

  const validCreditCardAmount =
    charge.__typename === 'CreditcardBankCharge' ? charge.validCreditCardAmount : null;

  useEffect(() => {
    if (charge.__typename === 'CreditcardBankCharge') {
      setIsValidating(validCreditCardAmount == null);
      if (validCreditCardAmount != null) {
        setIsValid(validCreditCardAmount);
      }
    }
  }, [charge.__typename, validCreditCardAmount]);

  return (
    <td>
      <div>
        <Indicator
          inline
          size={12}
          disabled={isValid}
          processing={isValidating}
          color="red"
          zIndex="auto"
        >
          <p
            className={
              (charge.totalAmount?.raw ?? 0) > 0
                ? 'whitespace-nowrap text-green-700'
                : 'whitespace-nowrap text-red-500'
            }
          >
            {charge.totalAmount?.formatted}
          </p>
        </Indicator>
      </div>
    </td>
  );
};