import React, { useEffect, useState } from 'react';
import { Dropdown } from '@theorchard/suite-components';
import { useContractAdvancesQualified } from 'src/apollo/queries/contract-advance';
import {
    ADVANCES_PENDING_SELECT_ITEMS_LIMIT,
    NO_PENDING_ADVANCES,
} from 'src/constants';
import { smartFormatter } from 'src/utils/amount-helpers';
import TruncatedText from '../shared/truncated-text';
import type { SingleValue } from 'react-select';

export interface ContractAdvancesQualifiedSelectPropTypes {
    changeHandler: (params: object) => void;
    contractId: string;
    contractAdvanceId: string;
    referencePaymentTypeId: string;
    setPaymentNameHandler: (params: string | null) => void;
}

interface OptionType {
    value: string;
    label: string;
    amount: string;
}

const ContractAdvancesQualifiedSelect: React.FC<
    ContractAdvancesQualifiedSelectPropTypes
> = ({
    contractId,
    contractAdvanceId,
    changeHandler,
    referencePaymentTypeId,
    setPaymentNameHandler,
}) => {
    const { data, loading } = useContractAdvancesQualified(
        contractId,
        ADVANCES_PENDING_SELECT_ITEMS_LIMIT,
        0,
        referencePaymentTypeId
    );

    const [options, setOptions] = useState<OptionType[]>();
    const [value, setValue] = useState<OptionType>();

    const advancesQualifiedItems =
        data?.abacusContractAdvancesQualified?.items || [];

    useEffect(() => {
        changeHandler({
            target: {
                name: 'specificAdvance',
                value: {
                    contractAdvanceId: value?.value,
                    paymentName: value?.label,
                },
            },
        });
    }, [value]);

    useEffect(() => {
        if (advancesQualifiedItems?.length > 0) {
            const optionsList: OptionType[] = advancesQualifiedItems.map(
                item => {
                    if (
                        contractAdvanceId &&
                        item?.contractAdvanceId === contractAdvanceId
                    ) {
                        setValue({
                            label: item.advanceDescription || '',
                            value: item.contractAdvanceId || '',
                            amount: smartFormatter(
                                item.amount,
                                item.currencyCode
                            ),
                        });
                        changeHandler({
                            target: {
                                name: 'specificAdvance',
                                value: {
                                    paymentName: item.advanceDescription || '',
                                },
                            },
                        });
                    }
                    return {
                        label: item?.advanceDescription || '',
                        value: item?.contractAdvanceId || '',
                        amount: smartFormatter(
                            item?.amount,
                            item?.currencyCode
                        ),
                    };
                }
            );
            setOptions(optionsList);
            if (!contractAdvanceId) {
                setValue({
                    label: optionsList[0].label,
                    value: optionsList[0].value,
                    amount: optionsList[0].amount,
                });
                changeHandler({
                    target: {
                        name: 'specificAdvance',
                        value: {
                            paymentName:
                                advancesQualifiedItems[0]?.advanceDescription,
                            contractAdvanceId:
                                advancesQualifiedItems[0]?.contractAdvanceId,
                        },
                    },
                });
            }
        } else {
            !loading && setPaymentNameHandler(null);
        }
    }, [advancesQualifiedItems, contractAdvanceId, loading]);

    const handleFormatOptionLabel = (option: OptionType) => (
        <TruncatedText
            placement={'right'}
            maxLength={55}
            value={`${option.label} | ${option.amount}`}
        />
    );

    const onDropdownChange = (e: SingleValue<OptionType>) => {
        setValue(e ?? undefined);
        setPaymentNameHandler(e?.label || '');
    };

    return (
        <div>
            <Dropdown
                name="ContractAdvancePendingDropdown"
                options={options}
                placeholder={'Select'}
                isLoading={loading}
                value={value}
                formatOptionLabel={handleFormatOptionLabel}
                isDisabled={advancesQualifiedItems.length === 0}
                onChange={e => onDropdownChange(e)}
            />
            {advancesQualifiedItems.length === 0 && (
                <div className="CustomFieldError FormControl-error-message">
                    {NO_PENDING_ADVANCES}
                </div>
            )}
        </div>
    );
};

export default ContractAdvancesQualifiedSelect;