Dwinzo_Demo/app/src/store/builder/useBuilderStore.ts

import { Object3D } from 'three';
import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';

interface BuilderState {
    // Common properties

    hoveredPoint: Point | null;
    snappedPoint: Point | null;
    snappedPosition: [number, number, number] | null;

    hoveredLine: [Point, Point] | null;

    // Wall

    wallThickness: number;
    wallHeight: number;
    outsideMaterial: string;
    insideMaterial: string;

    setWallThickness: (thickness: number) => void;
    setWallHeight: (height: number) => void;
    setWallMaterial: (material: string, side: 'inside' | 'outside') => void;

    // Aisle

    selectedAisle: Object3D | null;

    aisleType: AisleTypes;
    aisleWidth: number;
    aisleColor: AisleColors;

    // Dashed aisle properties
    dashLength: number;
    gapLength: number;

    // Dotted aisle properties
    dotRadius: number;

    // Arrows aisle properties
    aisleLength: number;

    // Junction aisle properties
    isFlipped: boolean;

    // Setters for common properties

    setHoveredPoint: (point: Point | null) => void;
    setSnappedPoint: (point: Point | null) => void;
    setSnappedPosition: (position: [number, number, number] | null) => void;

    setHoveredLine: (line: [Point, Point] | null) => void;

    setSelectedAisle: (aisle: Object3D | null) => void;

    setAisleType: (type: AisleTypes) => void;
    setAisleWidth: (width: number) => void;
    setAisleColor: (color: AisleColors) => void;

    // Setters for dashed aisle
    setDashLength: (length: number) => void;
    setGapLength: (length: number) => void;

    // Setters for dotted aisle
    setDotRadius: (radius: number) => void;

    // Setters for arrows aisle
    setAisleLength: (length: number) => void;

    // Setters for junction aisle
    setIsFlipped: (isFlipped: boolean) => void;

    // Batch setters
    setDashedAisleProperties: (width: number, dashLength: number, gapLength: number) => void;
    setDottedAisleProperties: (width: number, dotRadius: number, gapLength: number) => void;
    setArrowsAisleProperties: (width: number, aisleLength: number, gapLength: number) => void;
    setAisleProperties: (type: AisleTypes, width: number, color: AisleColors) => void;
}

export const useBuilderStore = create<BuilderState>()(
    immer((set) => ({
        // Default values

        hoveredPoint: null,
        snappedPoint: null,
        snappedPosition: null,

        hoveredLine: null,

        // Wall

        wallThickness: 0.5,
        wallHeight: 7,
        outsideMaterial: 'Default Material',
        insideMaterial: 'Default Material',

        setWallThickness: (thickness: number) => {
            set((state) => {
                state.wallThickness = thickness;
            })
        },

        setWallHeight: (height: number) => {
            set((state) => {
                state.wallHeight = height;
            })
        },

        setWallMaterial: (material: string, side: 'inside' | 'outside') => {
            set((state) => {
                if (side === 'outside') state.outsideMaterial = material;
                else state.insideMaterial = material;
            });
        },

        // Aisle

        selectedAisle: null,

        aisleType: 'solid-aisle',
        aisleWidth: 0.1,
        aisleColor: 'yellow',
        dashLength: 0.5,
        gapLength: 0.3,
        dotRadius: 0.1,
        aisleLength: 0.6,
        isFlipped: false,

        // Individual setters

        setHoveredPoint: (point: Point | null) => {
            set((state) => {
                state.hoveredPoint = point;
            });
        },

        setHoveredLine: (line: [Point, Point] | null) => {
            set((state) => {
                state.hoveredLine = line;
            })
        },

        setSnappedPoint: (point: Point | null) => {
            set((state) => {
                state.snappedPoint = point;
            });
        },

        setSnappedPosition: (position: [number, number, number] | null) => {
            set((state) => {
                state.snappedPosition = position;
            });
        },

        setSelectedAisle: (aisle: Object3D | null) => {
            set((state) => {
                state.selectedAisle = aisle;
            });
        },

        setAisleType: (type) => {
            set((state) => {
                state.aisleType = type;
            });
        },
        setAisleWidth: (width) => {
            set((state) => {
                state.aisleWidth = width;
            });
        },
        setAisleColor: (color) => {
            set((state) => {
                state.aisleColor = color;
            });
        },
        setDashLength: (length) => {
            set((state) => {
                state.dashLength = length;
            });
        },
        setGapLength: (length) => {
            set((state) => {
                state.gapLength = length;
            });
        },
        setDotRadius: (radius) => {
            set((state) => {
                state.dotRadius = radius;
            });
        },
        setAisleLength: (length) => {
            set((state) => {
                state.aisleLength = length;
            });
        },
        setIsFlipped: (isFlipped) => {
            set((state) => {
                state.isFlipped = isFlipped;
            });
        },

        // Batch setters
        setDashedAisleProperties: (width, dashLength, gapLength) => {
            set((state) => {
                state.aisleType = 'dashed-aisle';
                state.aisleWidth = width;
                state.dashLength = dashLength;
                state.gapLength = gapLength;
            });
        },
        setDottedAisleProperties: (width, dotRadius, gapLength) => {
            set((state) => {
                state.aisleType = 'dotted-aisle';
                state.aisleWidth = width;
                state.dotRadius = dotRadius;
                state.gapLength = gapLength;
            });
        },
        setArrowsAisleProperties: (width, aisleLength, gapLength) => {
            set((state) => {
                state.aisleType = 'arrows-aisle';
                state.aisleWidth = width;
                state.aisleLength = aisleLength;
                state.gapLength = gapLength;
            });
        },
        setAisleProperties: (type, width, color) => {
            set((state) => {
                state.aisleType = type;
                state.aisleWidth = width;
                state.aisleColor = color;
            });
        }
    }))
);