import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useMemo } from 'react';
import { ClearButton } from '../ClearButton/index.js';
import { normalizeText } from '../../../utils/index.js';
import { Arrow } from './styled.js';
function SelectComponent({ options, onChange, handleClear, clearable, placeholder, value = '', className, }) {
    const handleChange = (event) => {
        const { selectedIndex } = event.target;
        const index = placeholder || !value ? selectedIndex - 1 : selectedIndex;
        onChange(options[index]);
    };
    const renderOptions = useMemo(() => options.map(({ idx, value, title }, index) => {
        const normalizedValue = normalizeText(value);
        return (_jsx("option", { value: normalizedValue, className: "dropdown-option", children: title || normalizedValue }, idx || normalizedValue + index));
    }), [options]);
    const normalizedValue = normalizeText(value);
    const title = options.find((option) => option.value === value)?.title || normalizedValue;
    return (_jsxs("div", { className: className + ' dropdown-wrapper', children: [_jsx(Arrow, {}), clearable && normalizedValue?.length > 0 && _jsx(ClearButton, { handleClear: handleClear }), _jsxs("select", { onChange: handleChange, value: normalizedValue, className: "dropdown-select", "aria-label": "dropdown select", children: [placeholder && (_jsx("option", { disabled: true, hidden: true, value: placeholder, children: placeholder })), !normalizedValue && !placeholder && _jsx("option", { disabled: true }), renderOptions] }), _jsx("label", { children: title })] }));
}
export const Select = memo(SelectComponent);
//# sourceMappingURL=Select.js.map