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

export const CLASSNAME = 'DeliveryStatusDropdown';

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

const createOption = (status: string): DropdownOption<JobsStatusOption> => ({
    value: status,
});

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

    const handleChange = useCallback(
        (newValue?: SearchableDropdownOption<JobsStatusOption>) => {
            onChange({ status: newValue?.value });
        },
        [onChange]
    );

    let selectedOption: DropdownOption<JobsStatusOption> | null = null;
    if (status) selectedOption = createOption(status);

    return (
        <Dropdown
            name="deliveryStatusDropdown"
            className={CLASSNAME}
            onChange={handleChange}
            options={statusOptions}
            isDisabled={disabled}
            value={selectedOption}
            placeholder={placeholder}
            isClearable
            controlled
        />
    );
};

export default StatusDropdown;