import React, { useEffect, useState } from 'react';
import { Select } from '@theorchard/suite-components';
import { useReferenceSigningEntities } from 'src/apollo/queries/reference-signing-entity';
import type { ListViewItem } from '@theorchard/suite-components';

export interface ReferenceSigningEntitySelectPropTypes {
    /* eslint-disable no-unused-vars */
    className?: string;
    isClearable?: boolean;
    isDisabled?: boolean;
    id: string;
    onChange: (e: any) => void;
    name: string;
    paymentEntityId: string | null;
    placeholder?: string;
    testId?: string;
    value: string | null;
    /* eslint-enable no-unused-vars */
}

export const ReferenceSigningEntitySelect: React.FC<
    ReferenceSigningEntitySelectPropTypes
> = ({
    className = '',
    isClearable = true,
    isDisabled = false,
    id,
    name,
    onChange,
    paymentEntityId = null,
    placeholder = '',
    testId = 'referenceSigningEntitySelect',
    value,
}) => {
    const { data: signingEntities } = useReferenceSigningEntities();
    const [referenceSigningEntities, setReferenceSigningEntities] = useState<
        ListViewItem[]
    >([]);

    useEffect(() => {
        let signingEntitiesOptions: ListViewItem[] = [];
        if (signingEntities && signingEntities.abacusReferenceSigningEntities) {
            const { items } = signingEntities.abacusReferenceSigningEntities;

            if (paymentEntityId)
                items.forEach(
                    ({
                        referencePaymentEntity,
                        referenceSigningEntityId,
                        legalName,
                    }) => {
                        if (
                            referencePaymentEntity.referencePaymentEntityId ===
                            paymentEntityId
                        )
                            signingEntitiesOptions.push({
                                value: referenceSigningEntityId,
                                label: legalName,
                            });
                    }
                );
            else
                signingEntitiesOptions = items.map(item => ({
                    value: item.referenceSigningEntityId,
                    label: item.legalName,
                }));
            setReferenceSigningEntities(signingEntitiesOptions);
        }
    }, [signingEntities, paymentEntityId]);

    return (
        <>
            <Select
                className={`SelectSigningEntity ${className}`}
                disabled={isDisabled}
                id={id}
                hideClearButton={!isClearable}
                name={name}
                onChange={onChange}
                options={referenceSigningEntities}
                placeholder={placeholder}
                selectedValue={value || undefined}
                testId={testId}
            />
        </>
    );
};

export default ReferenceSigningEntitySelect;