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

export const CLASSNAME = 'OwnershipDeliveryJobStatusDropdown';

export interface Props {
    disabled?: boolean;
    onChange: SetParamsCallback;
    placeholder: string;
    status?: string;
    statusOptions: DropdownOption<JobStatusOption>[];
}

const JobStatusDropdown: FC<Props> = props => {
    const { onChange, disabled, status, placeholder, statusOptions } = props;

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

    return (
        <Select
            name="ownershipDeliveryJobStatusDropdown"
            className={CLASSNAME}
            onChange={handleChange}
            options={statusOptions}
            disabled={disabled}
            selectedValue={status}
            placeholder={placeholder}
            hideFilter
            compact
        />
    );
};

export default JobStatusDropdown;