import { useCallback, useRef, useState } from "react";
import type { Screen } from "../types/screen";
import type { Component } from "../types/component";
export interface CurrentScreenStatesAndActions {
states: {
curScreen: Screen,
curScreenIndex: number
curScreenComponents: Component[]
selectingComponent: Component
selectingComponentIndex: number
}
actions: {
changeCurScreen: (index: number) => void
setSelectComponentListener: (listener: SelectComponentListenerType) => void
resetSelectingComponent: () => void
activateSelectMode: () => void
}
}
export type SelectComponentListenerType = (selected: Component | null) => void
export function useCurrentScreen(screens: Screen[]): CurrentScreenStatesAndActions {
const [curScreenIndex, setCurScreenIndex] = useState<number>(0);
const [selectingComponentIndex, setSelectingComponentIndex] = useState<number>(-1);
const [selectMode, setSelectMode] = useState<boolean>(false);
const selectComponentCallbackRef = useRef<SelectComponentListenerType | null>(null);
const curScreen = screens[curScreenIndex];
const components = screens[curScreenIndex].components;
const selectingComponent = screens[curScreenIndex].components[selectingComponentIndex];
const changeCurScreen = (index: number) => {
if (index >= screens.length) return;
setCurScreenIndex(index);
}
const setSelectComponentListener = useCallback((listener: SelectComponentListenerType) => {
selectComponentCallbackRef.current = listener;
}, [])
const resetSelectingComponent = () => {
if (selectMode) {
setSelectMode(false);
} else {
setSelectingComponentIndex(-1);
}
}
const activateSelectMode = () => {
setSelectMode(true);
}
return {
states: {
curScreen,
curScreenIndex,
curScreenComponents: components,
selectingComponent,
selectingComponentIndex,
},
actions: {
changeCurScreen,
setSelectComponentListener,
resetSelectingComponent,
activateSelectMode
}
}
}