import React from 'react';
import { Field } from '@theorchard/suite-components';
import { USER_FEATURES } from 'src/constants';
import { isFeatureFlagEnabled } from 'src/utils/feature-flag';
import AgreementTypeDropdown from '../shared/agreement-type-dropdown';
import ReleasePayeeModal from './release-payee-modal';
import type { GetAccountFullDetailQuery } from 'src/apollo/queries/account/__generated__/get-account-full-detail';
import type { IPayeeFormData } from 'src/types/payee-form';
import { getErrorMessage } from 'src/utils/form-validations/get-error-message';

type AbacusAccount = NonNullable<GetAccountFullDetailQuery['abacusAccount']>;
type AccountPayee = NonNullable<AbacusAccount['accountPayee']>;
type PayoneerProgramPropTypes = NonNullable<AccountPayee['payoneerProgram']>;
type PaymentPendingInCurrentStatementPeriodPropTypes = NonNullable<
    AbacusAccount['paymentPendingInCurrentStatementPeriod']
>;

const HINT_EMPTY_PAYONEER_PROGRAM = (
    <i data-testid="hintEmptyPayoneerProgram">
        Automatically assigned based on Currency and Agreement Type.
    </i>
);

export interface PayeeFieldsPayoneerPropTypes {
    className?: string;
    changeHandler: (fieldName: keyof IPayeeFormData) => (value: any) => void;
    agreementFieldProps: {
        disabled?: boolean;
        allowedAgreementTypeIds?: string[];
        agreementTypeId?: string;
        error?: string;
        hidden?: boolean;
    };
    data: {
        payoneerProgram: PayoneerProgramPropTypes | null;
        payoneerPayeeId: string | null;
        accountPayeeId: string | null;
        paymentPendingInCurrentStatementPeriod: PaymentPendingInCurrentStatementPeriodPropTypes | null;
    };
}

const HELP_TOOLTIP_TEXT =
    'This payee has completed Payoneer onboarding and must be released from their current Payoneer Program before editing Agreement Type.';

const PayeeFieldsPayoneer: React.FC<PayeeFieldsPayoneerPropTypes> = ({
    changeHandler,
    data,
    agreementFieldProps,
}) => {
    const {
        payoneerProgram,
        payoneerPayeeId,
        accountPayeeId,
        paymentPendingInCurrentStatementPeriod,
    } = data;
    const {
        disabled,
        agreementTypeId,
        allowedAgreementTypeIds,
        error,
        hidden,
    } = agreementFieldProps;

    const isReleasePayeeEnabled = isFeatureFlagEnabled(
        USER_FEATURES.ABACUS_RELEASE_PAYEE
    );

    return (
        <div data-testid="payeeFieldsPayoneer">
            {hidden ? null : (
                <Field
                    controlId={'agreement-type'}
                    labelText="Agreement type"
                    helpText={payoneerPayeeId ? HELP_TOOLTIP_TEXT : undefined}
                    message={getErrorMessage(error)}
                >
                    <AgreementTypeDropdown
                        className="agreementType"
                        id="agreementTypeDropdown"
                        isDisabled={disabled}
                        onChange={(e: { value: string }) =>
                            changeHandler('agreementTypeId')(e && e.value)
                        }
                        selectedValue={agreementTypeId}
                        allowedAgreementTypeIds={allowedAgreementTypeIds}
                    />
                </Field>
            )}
            <Field controlId="payoneer-program" labelText="Payoneer Program">
                {payoneerProgram?.payoneerProgramName ||
                    HINT_EMPTY_PAYONEER_PROGRAM}
            </Field>
            <Field
                controlId="payoneer-program-id"
                labelText={'Payoneer Program ID'}
            >
                {payoneerProgram?.payoneerProgramId ||
                    HINT_EMPTY_PAYONEER_PROGRAM}
                {isReleasePayeeEnabled && Boolean(payoneerPayeeId) && (
                    <ReleasePayeeModal
                        accountPayeeId={accountPayeeId || ''}
                        paymentPendingInCurrentStatementPeriod={
                            paymentPendingInCurrentStatementPeriod
                        }
                    />
                )}
            </Field>
        </div>
    );
};

export default PayeeFieldsPayoneer;