import { DragItem } from "@components/DragItem/DragItem";
import { Select } from "@components/Select/Select";
import React from "react";
import DragContainer from "./DragContainer";


export interface IdropDown {
    label: string;
    value: string;
}

export interface IdropDownList {
    selected?: string,
    options: IdropDown[]
}

export interface DragListProps {
    dropdownItems: IdropDownList[]
}

export const DragDropList = ({ dropdownItems }: DragListProps) => {

    const [listItems, setListItems] = React.useState(dropdownItems || []);

    const handleList = (sortedList: any) => {
        const updatedListItems: IdropDownList[] = sortedList.map((item: { props: { children: { props: { value: any; options: any; }; }; }; }) => {
            const { value, options } = item.props.children.props;
            return { selected: value, options };
        });
        setListItems(updatedListItems);
    };

    return (
        <div>
            <DragContainer isDeletable={true} onChangeList={(sortedList) => { handleList(sortedList) }}>
                {listItems?.map((item, index) => (
                    <DragItem>
                        <Select onOptionChange={(selectedValue) => {
                            setListItems(prevListItems => {
                                const updatedList = [...prevListItems];
                                updatedList[index].selected = selectedValue;
                                return updatedList;
                            });
                        }} value={item.selected} options={item.options}></Select>

                    </DragItem>
                ))}
            </DragContainer>
        </div>
    );

};