import type { FC } from 'react';
import React from 'react';
import { Select } from '@theorchard/suite-components';
import { Priority } from 'src/data/globalTypes';
import { recordPriorityFilter } from 'src/utils/segment/filterEvents';
import type { ListViewItem } from '@theorchard/suite-components/src/components/listView/types';

export const CLASSNAME = 'PriorityDropdown';
export const TEST_ID = 'Select_priorityDropdown';

export interface PriorityOption {
    HIGH: string;
    MEDIUM: string;
    LOW: string;
}

export interface Props {
    disabled?: boolean;
    onChange: (name: { priority: string | undefined }, value?: string) => void;
    placeholder: string;
    priority?: string;
}

const PriorityDropdown: FC<Props> = props => {
    const { onChange, disabled, priority, placeholder } = props;
    const priorityOptions: ListViewItem[] = [
        { value: Priority.LOW, label: Priority.LOW },
        { value: Priority.MEDIUM, label: Priority.MEDIUM },
        { value: Priority.HIGH, label: Priority.HIGH },
    ];

    return (
        <Select
            name="priorityDropdown"
            className={CLASSNAME}
            testId={TEST_ID}
            onChange={priority => {
                onChange({ priority: priority?.value });
                recordPriorityFilter(priority?.value);
            }}
            options={priorityOptions}
            disabled={disabled}
            selectedValue={priority ? priority : undefined}
            placeholder={priority ? '' : placeholder}
            hideFilter
            compact
        />
    );
};

export default PriorityDropdown;