import React, { useCallback, useId } from 'react';
import { useDroppable, DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
import Select from 'react-select';
import { useTranslation } from 'react-i18next';
import { arrayMove, SortableContext, sortableKeyboardCoordinates, } from '@dnd-kit/sortable';
import Chevron from '../../icons/Chevron';
import { getTranslation } from '../../../../utilities/getTranslation';
import { SingleValue } from './SingleValue';
import { MultiValueLabel } from './MultiValueLabel';
import { MultiValue } from './MultiValue';
import { ValueContainer } from './ValueContainer';
import { ClearIndicator } from './ClearIndicator';
import { MultiValueRemove } from './MultiValueRemove';
import { Control } from './Control';
import './index.scss';
const SelectAdapter = (props) => {
    const { t, i18n } = useTranslation();
    const { className, showError, options, onChange, value, disabled = false, placeholder = t('general:selectValue'), isSearchable = true, isClearable = true, filterOption = undefined, isLoading, onMenuOpen, components, droppableRef, selectProps, } = props;
    const classes = [
        className,
        'react-select',
        showError && 'react-select--error',
    ].filter(Boolean).join(' ');
    return (React.createElement(Select, { isLoading: isLoading, placeholder: getTranslation(placeholder, i18n), captureMenuScroll: true, ...props, value: value, onChange: onChange, disabled: disabled ? 'disabled' : undefined, className: classes, classNamePrefix: "rs", options: options, isSearchable: isSearchable, isClearable: isClearable, filterOption: filterOption, onMenuOpen: onMenuOpen, selectProps: {
            ...selectProps,
            droppableRef,
        }, components: {
            ValueContainer,
            SingleValue,
            MultiValue,
            MultiValueLabel,
            MultiValueRemove,
            DropdownIndicator: Chevron,
            ClearIndicator,
            Control,
            ...components,
        } }));
};
const SortableSelect = (props) => {
    const { onChange, value, } = props;
    const uuid = useId();
    const { setNodeRef } = useDroppable({
        id: uuid,
    });
    const onDragEnd = useCallback((event) => {
        const { active, over } = event;
        if (!active || !over)
            return;
        let sorted = value;
        if (value && Array.isArray(value)) {
            const oldIndex = value.findIndex((item) => item.value === active.id);
            const newIndex = value.findIndex((item) => item.value === over.id);
            sorted = arrayMove(value, oldIndex, newIndex);
        }
        onChange(sorted);
    }, [onChange, value]);
    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
        coordinateGetter: sortableKeyboardCoordinates,
    }));
    let ids = [];
    if (value)
        ids = Array.isArray(value) ? value.map((item) => item === null || item === void 0 ? void 0 : item.value) : [value === null || value === void 0 ? void 0 : value.value]; // TODO: fix these types
    return (React.createElement(DndContext, { onDragEnd: onDragEnd, sensors: sensors, collisionDetection: closestCenter },
        React.createElement(SortableContext, { items: ids },
            React.createElement(SelectAdapter, { ...props, droppableRef: setNodeRef }))));
};
const ReactSelect = (props) => {
    const { isMulti, isSortable, } = props;
    if (isMulti && isSortable) {
        return (React.createElement(SortableSelect, { ...props }));
    }
    return (React.createElement(SelectAdapter, { ...props }));
};
export default ReactSelect;
