import * as React from 'react';
import { DragDropContext, Draggable, Droppable } from '../../../components/dnd';
import { Icon } from '../../../components/icons';
import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
import { Box, Flex } from '../../../components/Flex';
import clsx from 'clsx';
export function ReorderDraggable(props) {
    const { onChange, order, toIdentifier, isOptionDraggable, disabled, } = props;
    const baseClassName = 'ab-ReorderDraggable';
    const renderOption = (option, index) => {
        const identifier = toIdentifier(option);
        const renderNode = (flexProps, dragHandleProps) => {
            const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
            return (React.createElement(Flex, { alignItems: "center", key: identifier ?? index, "data-index": index, "data-id": identifier, "data-name": "option", ...flexProps, className: clsx(`${baseClassName}__option ${index ? 'twa:mt-1' : 'twa:mt-0'} twa:bg-primary twa:p-2 ${flexProps?.className || ''}`, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e) },
                React.createElement(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center" },
                    reorderable ? (React.createElement(Box, { ...dragHandleProps, className: `twa:mr-3 ${dragHandleProps?.className || ''}` },
                        React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : (React.createElement(Box, { className: "twa:mr-3" },
                        React.createElement(Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }))),
                    props.renderOption(option, index))));
        };
        const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
        return (React.createElement(Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable || disabled }, (draggableProvided) => {
            return renderNode({
                ref: draggableProvided.innerRef,
                ...draggableProvided.draggableProps,
                style: draggableProvided.draggableProps.style,
            }, draggableProvided.dragHandleProps);
        }));
    };
    return (React.createElement(Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column" },
        React.createElement(DragDropContext, { onDragEnd: (result) => {
                const { source, destination } = result;
                const newOrder = ArrayExtensions.reorderArray(props.order, source.index, destination.index);
                onChange(newOrder);
            } },
            React.createElement(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column" },
                React.createElement(Droppable, { droppableId: "droppable" }, (droppableProvided) => {
                    return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
                        order.map(renderOption),
                        droppableProvided.placeholder));
                })))));
}
