import type { FC } from 'react';
import React from 'react';
import { Select } from '@theorchard/suite-components';
import type { JobEntityOption } from '../types';
import type { DropdownOption, SearchableDropdownOption } from 'src/types';
import type { SetParamsCallback } from 'src/utils/route';

export const CLASSNAME = 'OwnershipDeliveryJobEntityDropdown';

export interface Props {
    disabled?: boolean;
    onChange: SetParamsCallback;
    placeholder: string;
    entity?: string;
    jobsEntityOptions: DropdownOption<JobEntityOption>[];
}

const JobEntityDropdown: FC<Props> = props => {
    const { onChange, disabled, entity, placeholder, jobsEntityOptions } =
        props;

    const handleChange = (
        newValue?: SearchableDropdownOption<JobEntityOption>
    ) => {
        onChange({ entity: newValue?.value });
    };

    return (
        <Select
            name="ownershipDeliveryJobEntityDropdown"
            className={CLASSNAME}
            placeholder={placeholder}
            onChange={handleChange}
            options={jobsEntityOptions}
            disabled={disabled}
            selectedValue={entity}
            compact
            hideFilter
        ></Select>
    );
};

export default JobEntityDropdown;