import React, { useEffect, useState } from 'react';
import { Form, Label } from '@theorchard/suite-components';
import { Alert } from '@theorchard/suite-components';
import { useContractAccountPayeeActionStates } from 'src/apollo/queries/contract';
import { INELIGIBLE_ACCOUNT_ALERT_TEXT } from 'src/constants';
import useContractSearch from 'src/hooks/contract-search';
import {
    type PaymentSpecificAdvanceParsedParams,
    type PaymentGroupFormData,
} from 'src/types/payment-group-form';
import { statesArePaymentReady } from 'src/utils/action-states';
import ContractAdvancesQualifiedSelect from './contract-advances-qualified-select';

interface PaymentSpecificAdvancePropTypes {
    changeHandler: (params: object) => void;
    setFormData: (params: PaymentGroupFormData) => void;
    formData: Partial<PaymentGroupFormData>;
    parsedParams: PaymentSpecificAdvanceParsedParams;
}

const PaymentSpecificAdvance: React.FC<PaymentSpecificAdvancePropTypes> = ({
    changeHandler,
    formData,
    setFormData,
    parsedParams,
}) => {
    const { contractId, renderContractSearch } = useContractSearch({
        className: 'contractSearch',
        clearable: false,
        placeholder: 'Search By Contract Name or ID',
        contractType: null,
        contractIdPreselected: parsedParams.contractId,
    });
    const [error, setError] = useState();
    const {
        data: actionStates,
        loading,
        getActionStatesByContractId,
    } = useContractAccountPayeeActionStates();

    const [paymentName, setPaymentName] =
        useState<React.SetStateAction<string | null | undefined>>();

    useEffect(() => {
        setFormData({});
        if (contractId) {
            getActionStatesByContractId(contractId).catch(err => {
                setError(err[0].message || JSON.stringify(err));
            });
        }
    }, [contractId]);

    const arePaymentReady = statesArePaymentReady(actionStates);

    const onChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
        const { value } = event.currentTarget;
        setFormData({
            specificAdvance: {
                ...formData.specificAdvance,
                paymentName: value,
            },
        });
    };

    return (
        <div data-testid="PaymentSpecificAdvance">
            {error && <Alert text={error} variant="error" />}
            <div className="PaymentGroupFormFieldsGroup">
                <div className="ContractSearchContainer">
                    <Label className="ContractSearchLabel" text="Contract" />
                    {renderContractSearch()}
                    {contractId && !loading && arePaymentReady === false && (
                        <div className="CustomFieldError FormControl-error-message">
                            {INELIGIBLE_ACCOUNT_ALERT_TEXT}
                        </div>
                    )}
                </div>
                {contractId && !loading && arePaymentReady && (
                    <>
                        <div>
                            <Label text="Select Unpaid Advance" />
                            <ContractAdvancesQualifiedSelect
                                contractAdvanceId={
                                    parsedParams.contractAdvanceId
                                }
                                contractId={contractId}
                                changeHandler={changeHandler}
                                referencePaymentTypeId={
                                    parsedParams.referencePaymentTypeId
                                }
                                setPaymentNameHandler={setPaymentName}
                            />
                        </div>
                        {(formData.contractAdvancePendingId ||
                            paymentName !== null) && (
                            <div>
                                <Label text="Payment Name" />
                                <Form.Control
                                    data-testid="input-payment-name"
                                    name="paymentName"
                                    onChange={onChange}
                                    placeholder="Enter Payment Name"
                                    type="text"
                                    value={
                                        formData.specificAdvance?.paymentName ||
                                        ''
                                    }
                                />
                            </div>
                        )}
                    </>
                )}
            </div>
        </div>
    );
};

export default PaymentSpecificAdvance;