import React from 'react';
import { Dropdown } from '@theorchard/suite-components';
import { useReferenceAgreementTypes } from 'src/apollo/queries/abacus-reference-agreement-types';

export interface AgreementTypeDropdownPropTypes {
    className?: string;
    isClearable?: boolean;
    isSearchable?: boolean;
    isDisabled?: boolean;
    id: string;
    isMultiSelect?: boolean;
    onChange: React.EventHandler<any>;
    name?: string;
    placeholder?: string;
    value?: string;
    selectedValue?: string;
    allowedAgreementTypeIds?: string[];
}

const AgreementTypeDropdown: React.FC<AgreementTypeDropdownPropTypes> = ({
    className = '',
    isClearable = false,
    isSearchable = false,
    isDisabled = false,
    id,
    isMultiSelect = false,
    name,
    onChange,
    placeholder = 'Select Agreement Type',
    selectedValue,
    allowedAgreementTypeIds,
}) => {
    const { data, loading } = useReferenceAgreementTypes();

    const filteredOptions = data?.abacusReferenceAgreementTypes
        .filter(
            item =>
                !allowedAgreementTypeIds?.length ||
                allowedAgreementTypeIds.includes(item.referenceAgreementTypeId)
        )
        .map(item => ({
            label: item.agreementType,
            value: item.referenceAgreementTypeId,
        }));

    // Ghost option: if the current selectedValue is not in the filtered options,
    // inject it as a disabled option so the user can see their saved selection
    // without being able to re-select it.
    const isSelectedMissing =
        !!selectedValue &&
        !!allowedAgreementTypeIds?.length &&
        !filteredOptions?.some(opt => opt.value === selectedValue);

    const ghostType = isSelectedMissing
        ? data?.abacusReferenceAgreementTypes.find(
              item => item.referenceAgreementTypeId === selectedValue
          )
        : undefined;

    const options = ghostType
        ? [
              ...(filteredOptions ?? []),
              {
                  label: ghostType.agreementType,
                  value: ghostType.referenceAgreementTypeId,
                  disabled: true,
              },
          ]
        : filteredOptions;

    return (
        <>
            <Dropdown
                className={`AgreementTypeDropdown ${className}`}
                closeMenuOnSelect={!isMultiSelect}
                id={id}
                isSearchable={isSearchable}
                isClearable={isClearable}
                isDisabled={isDisabled}
                isMulti={isMultiSelect}
                name={name}
                onChange={onChange}
                options={options}
                placeholder={placeholder}
                isLoading={loading}
                selectedValue={selectedValue}
            />
        </>
    );
};

export default AgreementTypeDropdown;