import * as THREE from "three";
import { create } from "zustand";
import { io } from "socket.io-client";
import * as CONSTANTS from '../../types/world/worldConstants';

export const useSocketStore = create<any>((set: any, get: any) => ({
    socket: null,
    initializeSocket: (email: string, organization: string) => {
        const existingSocket = get().socket;
        if (existingSocket) {
            return;
        }

        const socket = io(
            `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
            {
                reconnection: true,
                auth: { email, organization },
            }
        );

        const visualizationSocket = io(
            `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
            {
                reconnection: true,
                auth: { email, organization },
            }
        );

        set({ socket, visualizationSocket });
    },
    disconnectSocket: () => {
        set((state: any) => {
            state.socket?.disconnect();
            state.visualizationSocket?.disconnect();
            return { socket: null };
        });
    },
}));

export const useLoadingProgress = create<{
    loadingProgress: number;
    setLoadingProgress: (x: number) => void;
}>((set) => ({
    loadingProgress: 1,
    setLoadingProgress: (x: number) => set({ loadingProgress: x }),
}));

export const useOrganization = create<any>((set: any) => ({
    organization: "",
    setOrganization: (x: any) => set(() => ({ organization: x })),
}));

export const useToggleView = create<any>((set: any) => ({
    toggleView: false,
    setToggleView: (x: any) => set(() => ({ toggleView: x })),
}));

export const useUpdateScene = create<any>((set: any) => ({
    updateScene: false,
    setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
}));

export const useWalls = create<any>((set: any) => ({
    walls: [],
    setWalls: (x: any) => set(() => ({ walls: x })),
}));

export const useRoomsState = create<any>((set: any) => ({
    roomsState: [],
    setRoomsState: (x: any) => set(() => ({ roomsState: x })),
}));

export const useZones = create<any>((set: any) => ({
    zones: [],
    setZones: (callback: any) =>
        set((state: any) => ({
            zones: typeof callback === "function" ? callback(state.zones) : callback,
        })),
}));

interface ZonePointsState {
    zonePoints: THREE.Vector3[];
    setZonePoints: (points: THREE.Vector3[]) => void;
}

export const useZonePoints = create<ZonePointsState>((set) => ({
    zonePoints: [],
    setZonePoints: (points) => set({ zonePoints: points }),
}));

export const useSelectedItem = create<any>((set: any) => ({
    selectedItem: { name: "", id: "", type: undefined, category: '', subCatergory: '' },
    setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
}));

export const useNavMesh = create<any>((set: any) => ({
    navMesh: null,
    setNavMesh: (x: any) => set({ navMesh: x }),
}));

export const useSelectedAssets = create<any>((set: any) => ({
    selectedAssets: [],
    setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
}));

export const useLayers = create<any>((set: any) => ({
    Layers: 1,
    setLayers: (x: any) => set(() => ({ Layers: x })),
}));

export const useCamPosition = create<any>((set: any) => ({
    camPosition: { x: undefined, y: undefined, z: undefined },
    setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
}));

export const useMenuVisible = create<any>((set: any) => ({
    menuVisible: false,
    setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
}));

export const useDeleteTool = create<any>((set: any) => ({
    deleteTool: false,
    setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
}));

export const useToolMode = create<any>((set: any) => ({
    toolMode: null,
    setToolMode: (x: any) => set(() => ({ toolMode: x })),
}));

export const useNewLines = create<any>((set: any) => ({
    newLines: [],
    setNewLines: (x: any) => set(() => ({ newLines: x })),
}));

export const useDeletedLines = create<any>((set: any) => ({
    deletedLines: [],
    setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
}));

export const useMovePoint = create<any>((set: any) => ({
    movePoint: false,
    setMovePoint: (x: any) => set(() => ({ movePoint: x })),
}));

export const useDeletePointOrLine = create<any>((set: any) => ({
    deletePointOrLine: false,
    setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
}));

export const useFloorItems = create<any>((set: any) => ({
    floorItems: null,
    setFloorItems: (callback: any) =>
        set((state: any) => ({
            floorItems:
                typeof callback === "function" ? callback(state.floorItems) : callback,
        })),
}));

export const useWallItems = create<any>((set: any) => ({
    wallItems: [],
    setWallItems: (callback: any) =>
        set((state: any) => ({
            wallItems:
                typeof callback === "function" ? callback(state.wallItems) : callback,
        })),
}));

export const useSelectedWallItem = create<any>((set: any) => ({
    selectedWallItem: null,
    setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
}));

export const useSelectedFloorItem = create<any>((set: any) => ({
    selectedFloorItem: null,
    setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
}));

export const useDeletableFloorItem = create<any>((set: any) => ({
    deletableFloorItem: null,
    setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
}));

export const useSetScale = create<any>((set: any) => ({
    scale: null,
    setScale: (x: any) => set(() => ({ scale: x })),
}));

export const useRoofVisibility = create<any>((set: any) => ({
    roofVisibility: false,
    setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
}));

export const useWallVisibility = create<any>((set: any) => ({
    wallVisibility: false,
    setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
}));

export const useShadows = create<any>((set: any) => ({
    shadows: false,
    setShadows: (x: any) => set(() => ({ shadows: x })),
}));

export const useSunPosition = create<any>((set: any) => ({
    sunPosition: { x: undefined, y: undefined, z: undefined },
    setSunPosition: (newSuntPosition: any) =>
        set({ sunPosition: newSuntPosition }),
}));

export const useRemoveLayer = create<any>((set: any) => ({
    removeLayer: false,
    setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
}));

export const useRemovedLayer = create<any>((set: any) => ({
    removedLayer: null,
    setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
}));

export const useActiveLayer = create<any>((set: any) => ({
    activeLayer: 1,
    setActiveLayer: (x: any) => set({ activeLayer: x }),
}));

interface RefTextUpdateState {
    refTextupdate: number;
    setRefTextUpdate: (
        callback: (currentValue: number) => number | number
    ) => void;
}

export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
    refTextupdate: -1000,
    setRefTextUpdate: (callback) =>
        set((state) => ({
            refTextupdate:
                typeof callback === "function"
                    ? callback(state.refTextupdate)
                    : callback,
        })),
}));

export const useResetCamera = create<any>((set: any) => ({
    resetCamera: false,
    setResetCamera: (x: any) => set({ resetCamera: x }),
}));

export const useAddAction = create<any>((set: any) => ({
    addAction: null,
    setAddAction: (x: any) => set({ addAction: x }),
}));

export const useActiveTool = create<any>((set: any) => ({
    activeTool: "cursor",
    setActiveTool: (x: any) => set({ activeTool: x }),
}));

export const useActiveSubTool = create<any>((set: any) => ({
    activeSubTool: "cursor",
    setActiveSubTool: (x: any) => set({ activeSubTool: x }),
}));

export const use2DUndoRedo = create<any>((set: any) => ({
    is2DUndoRedo: null,
    set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
}));

export const useElevation = create<any>((set: any) => ({
    elevation: 45,
    setElevation: (x: any) => set({ elevation: x }),
}));

export const useAzimuth = create<any>((set: any) => ({
    azimuth: -160,
    setAzimuth: (x: any) => set({ azimuth: x }),
}));

export const useRenderDistance = create<any>((set: any) => ({
    renderDistance: 40,
    setRenderDistance: (x: any) => set({ renderDistance: x }),
}));

export const useCamMode = create<any>((set: any) => ({
    camMode: "ThirdPerson",
    setCamMode: (x: any) => set({ camMode: x }),
}));

export const useUserName = create<any>((set: any) => ({
    userName: "",
    setUserName: (x: any) => set({ userName: x }),
}));

export const useObjectPosition = create<any>((set: any) => ({
    objectPosition: { x: undefined, y: undefined, z: undefined },
    setObjectPosition: (newObjectPosition: any) =>
        set({ objectPosition: newObjectPosition }),
}));

export const useObjectRotation = create<any>((set: any) => ({
    objectRotation: { x: undefined, y: undefined, z: undefined },
    setObjectRotation: (newObjectRotation: any) =>
        set({ objectRotation: newObjectRotation }),
}));

export const useDrieTemp = create<any>((set: any) => ({
    drieTemp: undefined,
    setDrieTemp: (x: any) => set({ drieTemp: x }),
}));

export const useActiveUsers = create<any>((set: any) => ({
    activeUsers: [],
    setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
        set((state: { activeUsers: any[] }) => ({
            activeUsers:
                typeof callback === "function" ? callback(state.activeUsers) : callback,
        })),
}));

export const useDrieUIValue = create<any>((set: any) => ({
    drieUIValue: { touch: null, temperature: null, humidity: null },

    setDrieUIValue: (x: any) =>
        set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),

    setTouch: (value: any) =>
        set((state: any) => ({
            drieUIValue: { ...state.drieUIValue, touch: value },
        })),
    setTemperature: (value: any) =>
        set((state: any) => ({
            drieUIValue: { ...state.drieUIValue, temperature: value },
        })),
    setHumidity: (value: any) =>
        set((state: any) => ({
            drieUIValue: { ...state.drieUIValue, humidity: value },
        })),
}));

export const useStartSimulation = create<any>((set: any) => ({
    startSimulation: false,
    setStartSimulation: (x: any) => set({ startSimulation: x }),
}));

export const useEyeDropMode = create<any>((set: any) => ({
    eyeDropMode: false,
    setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
}));

export const useEditingPoint = create<any>((set: any) => ({
    editingPoint: false,
    setEditingPoint: (x: any) => set({ editingPoint: x }),
}));

export const usezoneTarget = create<any>((set: any) => ({
    zoneTarget: [],
    setZoneTarget: (x: any) => set({ zoneTarget: x }),
}));

export const usezonePosition = create<any>((set: any) => ({
    zonePosition: [],
    setZonePosition: (x: any) => set({ zonePosition: x }),
}));

interface EditPositionState {
    Edit: boolean;
    setEdit: (value: boolean) => void;
}

export const useEditPosition = create<EditPositionState>((set) => ({
    Edit: false,
    setEdit: (value) => set({ Edit: value }),
}));

export const useAsset3dWidget = create<any>((set: any) => ({
    widgetSelect: "",
    setWidgetSelect: (x: any) => set({ widgetSelect: x }),
}));

export const useWidgetSubOption = create<any>((set: any) => ({
    widgetSubOption: "2D",
    setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
}));
export const useLimitDistance = create<any>((set: any) => ({
    limitDistance: true,
    setLimitDistance: (x: any) => set({ limitDistance: x }),
}));

export const useTileDistance = create<any>((set: any) => ({
    gridValue: { size: CONSTANTS.gridConfig.size, divisions: CONSTANTS.gridConfig.divisions },
    planeValue: { height: CONSTANTS.planeConfig.height, width: CONSTANTS.planeConfig.width },

    setGridValue: (value: any) =>
        set((state: any) => ({
            gridValue: { ...state.gridValue, ...value },
        })),

    setPlaneValue: (value: any) =>
        set((state: any) => ({
            planeValue: { ...state.planeValue, ...value },
        })),
}));

export const usePlayAgv = create<any>((set, get) => ({
    PlayAgv: [],
    setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
        set({ PlayAgv: updateFn(get().PlayAgv) }),
}));

// Define the Asset type
type Asset = {
    id: string;
    name: string;
    position?: [number, number, number]; // Optional: 3D position
    rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation
};

// Zustand store type
type ZoneAssetState = {
    zoneAssetId: Asset | null;
    setZoneAssetId: (asset: Asset | null) => void;
};

// Zustand store
export const useZoneAssetId = create<ZoneAssetState>((set) => ({
    zoneAssetId: null,
    setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
}));

// version visible hidden
interface VersionHistoryState {
    viewVersionHistory: boolean;
    setVersionHistory: (value: boolean) => void;
}

const useVersionHistoryStore = create<VersionHistoryState>((set) => ({
    viewVersionHistory: false,
    setVersionHistory: (value) => set({ viewVersionHistory: value }),
}));

export default useVersionHistoryStore;

interface ShortcutStore {
    showShortcuts: boolean;
    setShowShortcuts: (value: boolean) => void;
    toggleShortcuts: () => void;
}

export const useShortcutStore = create<ShortcutStore>((set) => ({
    showShortcuts: false,
    setShowShortcuts: (value) => set({ showShortcuts: value }),
    toggleShortcuts: () =>
        set((state) => ({ showShortcuts: !state.showShortcuts })),
}));