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

const PLACEHOLDER_MESSAGE = 'Select Signing Entity';

export interface ReferenceSigningEntityMultiDropdownPropTypes {
    variant?: SelectInputVariant;
    className?: string;
    id: string;
    isDisabled?: boolean;
    onChange: (e: ListViewItem[] | undefined) => void;
    paymentEntityId?: string | null;
    placeholder?: string;
    requireApply?: boolean;
    testId?: string;
    value?: string[] | [];
}

export const ReferenceSigningEntityMultiDropdown: React.FC<
    ReferenceSigningEntityMultiDropdownPropTypes
> = ({
    variant,
    className = '',
    id,
    isDisabled = false,
    onChange,
    paymentEntityId = null,
    placeholder = PLACEHOLDER_MESSAGE,
    requireApply = true,
    testId = 'ReferenceSigningEntityMultiDropdown',
    value,
}) => {
    const { data: signingEntities, loading } = useReferenceSigningEntities();

    const { options } = useMemo(() => {
        const items =
            signingEntities?.abacusReferenceSigningEntities?.items || [];
        const signingEntitiesOptions: ListViewItem[] = [];

        items.forEach(
            ({
                referencePaymentEntity,
                referenceSigningEntityId,
                legalName,
            }) => {
                const matchesPaymentEntity =
                    !paymentEntityId ||
                    referencePaymentEntity?.referencePaymentEntityId ===
                        paymentEntityId;

                if (matchesPaymentEntity) {
                    signingEntitiesOptions.push({
                        value: referenceSigningEntityId,
                        label: legalName,
                    });
                }
            }
        );

        return {
            options: signingEntitiesOptions,
        };
    }, [signingEntities, paymentEntityId]);

    return (
        <MultiSelect
            variant={variant || undefined}
            className={`SelectSigningEntity ${className}`}
            id={id}
            disabled={isDisabled || loading}
            onChange={onChange}
            options={options}
            placeholder={placeholder}
            requireApply={requireApply}
            selectedValue={value || undefined}
            testId={testId}
        />
    );
};

export default ReferenceSigningEntityMultiDropdown;