apparel-designer/client/src/hooks/useDesignEditor.js

import { useState, useCallback } from 'react';

export function useDesignEditor() {
  const [elements, setElements] = useState([]);
  const [selectedId, setSelectedId] = useState(null);

  const addElement = useCallback((element) => {
    const newElement = {
      ...element,
      id: `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
    };
    setElements((prev) => [...prev, newElement]);
    setSelectedId(newElement.id);
    return newElement.id;
  }, []);

  const updateElement = useCallback((id, attrs) => {
    setElements((prev) =>
      prev.map((el) => (el.id === id ? { ...el, ...attrs } : el))
    );
  }, []);

  const deleteElement = useCallback((id) => {
    setElements((prev) => prev.filter((el) => el.id !== id));
    if (selectedId === id) {
      setSelectedId(null);
    }
  }, [selectedId]);

  const selectElement = useCallback((id) => {
    setSelectedId(id);
  }, []);

  const deselectAll = useCallback(() => {
    setSelectedId(null);
  }, []);

  const reorderElement = useCallback((id, newOrder) => {
    setElements((prev) => {
      const index = prev.findIndex((el) => el.id === id);
      if (index === -1 || index === newOrder) return prev;
      const newElements = [...prev];
      const [removed] = newElements.splice(index, 1);
      newElements.splice(newOrder, 0, removed);
      return newElements;
    });
  }, []);

  return {
    elements,
    selectedId,
    addElement,
    updateElement,
    deleteElement,
    selectElement,
    deselectAll,
    reorderElement,
  };
}