import type { Project } from "../types/project";
import type { Screen } from "../types/screen";
import { useState } from "react";
import type { Dispatch, SetStateAction } from "react";
export interface ScreenState {
screens: Screen[],
curScreenIndex: number,
curScreen: Screen
}
export interface ScreenActions {
setCurScreenIndex: (index: number) => void
addScreen: (name: string) => Promise<string>,
deleteScreen: (index: number) => void,
updateScreen: (index: number, name: string) => void
}
export interface ScreenStateAndActions {
screenState: ScreenState,
screenActions: ScreenActions,
screenDispatch: {
setScreens: Dispatch<SetStateAction<Screen[]>>
}
}
export function useScreen(project: Project): ScreenStateAndActions {
const [screens, setScreens] = useState<Screen[]>(project.screens);
const [curScreenIndex, setCurScreenIndex] = useState<number>(0);
const curScreen: Screen = screens[curScreenIndex];
const addScreen = async (name: string): Promise<string> => {
const nextIndex = screens[screens.length - 1].index + 1;
const newScreenId = "s" + self.crypto.randomUUID().replace(/-/g, "");
const newScreen: Screen = {
id: newScreenId,
components: [],
index: nextIndex,
name: name,
projectId: project.id
}
setScreens((curScreens) => [...curScreens, newScreen]);
setCurScreenIndex(screens.length - 1);
return newScreenId;
};
const deleteScreen = async (index: number) => {
setCurScreenIndex(0);
setScreens((prev) => prev.filter((_, i) => i !== index));
}
const updateScreen = async (index: number, name: string) => {
setScreens((prev) => prev.map((item, i) => i === index ? { ...item, name: name } : item));
}
return {
screenState: {
screens,
curScreenIndex,
curScreen
},
screenActions: {
setCurScreenIndex,
addScreen,
updateScreen,
deleteScreen
},
screenDispatch: {
setScreens
}
}
}