import React from "react";
import { IconGripVertical } from "@tabler/icons-react";
import { Box, Divider, Stack } from "@mantine/core";
import OptionTableRow from "@/app/attributes/drawers/AttrSelectEditorDrawer/components/OptionTableRow";
import { useSelectEditorContext } from "@/app/attributes/drawers/AttrSelectEditorDrawer/contexts/SelectEditorContext";
import SortableDnd from "@/components/dnd/SortableDnd";

const OptionsTable = () => {
    const { options } = useSelectEditorContext();
    const { onDragEnd } = useSelectEditorContext();

    const renderDraggable = () => (
        <Box p={"xs"}>
            <IconGripVertical />
        </Box>
    );

    return (
        <Stack gap={0}>
            <Divider />
            <SortableDnd
                initialItems={options}
                onDragEnd={onDragEnd}
                renderItem={(item, renderDraggable) => (
                    <OptionTableRow
                        option={item}
                        renderDraggable={renderDraggable}
                    />
                )}
                renderDraggable={renderDraggable}
                dragHandleStyle={{ width: "auto" }}
                vertical
            />
        </Stack>
    );
};

export default OptionsTable;