import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import DragAndDrop from './DragAndDrop';
const { DNDCore: { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, closestCorners, }, DNDSortable: { useSortable, arrayMove, sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, }, DNDUtilities: { CSS }, } = DragAndDrop;
import Typography from '../Typography';
import './DragAndDropList.scss';
export const Task = ({ id, title }) => {
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
    const style = {
        transition,
        transform: CSS.Transform.toString(transform),
    };
    return (_jsx("div", { ref: setNodeRef, style: style, ...attributes, ...listeners, className: "task", children: _jsx(Typography, { as: 'h1', fontSize: 16, className: 'task-title', children: title }) }));
};
export const Column = ({ tasks }) => {
    return (_jsx("div", { className: "column", children: _jsx(SortableContext, { items: tasks, strategy: verticalListSortingStrategy, children: tasks.map((task) => (_jsx(Task, { id: task.id, title: task.title }, task.id))) }) }));
};
export const Input = ({ onSubmit }) => {
    const [input, setInput] = useState('');
    const handleSubmit = () => {
        if (!input)
            return;
        onSubmit(input);
        setInput('');
    };
    return (_jsxs("div", { className: "container", children: [_jsx("input", { className: "input", type: "text", value: input, onChange: (e) => setInput(e.target.value) }), _jsx("button", { onClick: handleSubmit, className: "button", children: _jsx(Typography, { fontSize: 14, children: "Add" }) })] }));
};
const DragAndDropList = () => {
    const [tasks, setTasks] = useState([
        { id: 1, title: 'Add tests to homepage' },
        { id: 2, title: 'Fix styling in about section' },
        { id: 3, title: 'Learn how to center a div' },
    ]);
    const addTask = (title) => {
        setTasks((tasks) => [...tasks, { id: tasks.length + 1, title }]);
    };
    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
        coordinateGetter: sortableKeyboardCoordinates,
    }));
    const getTaskPos = (id) => tasks.findIndex((task) => task.id === id);
    const handleDragEnd = (event) => {
        const { active, over } = event;
        if (active.id === over?.id)
            return;
        setTasks((tasks) => {
            const originalPos = getTaskPos(Number(active?.id));
            const newPos = getTaskPos(Number(over?.id));
            return arrayMove(tasks, originalPos, newPos);
        });
    };
    return (_jsxs("div", { className: "drag-and-drop-list", children: [_jsx(Typography, { fontSize: 32, fontWeight: "semi-bold", children: "Drag and Drop test \u2705" }), _jsx(Input, { onSubmit: addTask }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCorners, onDragEnd: handleDragEnd, children: _jsx(Column, { id: "toDo", tasks: tasks }) })] }));
};
export default DragAndDropList;
//# sourceMappingURL=DragAndDropList.js.map