import React from 'react';
import { Dropdown } from '@theorchard/suite-components';
import { useFeatureFlag } from '@theorchard/suite-frontend';
import { MILESTONES, MILESTONE_OPTIONS, USER_FEATURES } from 'src/constants';
import { getSelectedOptions } from 'src/utils/searchable-dropdown-option';

export interface MilestonesPropTypes {
    className?: string;
    isClearable?: boolean;
    isDisabled?: boolean;
    id: string;
    isMultiSelect?: boolean;
    onChange: any;
    name: string;
    placeholder?: string;
    value: string | [];
}

export const MilestonesSelect: React.FC<MilestonesPropTypes> = ({
    className = '',
    isClearable = true,
    isDisabled = false,
    id,
    isMultiSelect = false,
    name,
    onChange,
    placeholder = '',
    value,
}) => {
    // TODO: remove feature flag and MILESTONES variable references
    const isFeatureMilestoneNewOptionsEnabled = useFeatureFlag(
        USER_FEATURES.ABACUS_CONTRACT_ADVANCE_MILESTONE_NEW_OPTIONS
    );
    const milestoneOptions = isFeatureMilestoneNewOptionsEnabled
        ? MILESTONE_OPTIONS
        : MILESTONES;
    return (
        <>
            <Dropdown
                controlled
                className={`SelectMilestone ${className}`}
                closeMenuOnSelect={!isMultiSelect}
                id={id}
                isClearable={isClearable}
                isDisabled={isDisabled}
                isMulti={isMultiSelect}
                name={name}
                onChange={onChange}
                options={milestoneOptions}
                value={getSelectedOptions(milestoneOptions, value)}
                placeholder={placeholder}
                isLoading={false}
            />
        </>
    );
};

export default MilestonesSelect;