import type { Project } from "../types/project";
import type { Screen } from "../types/screen";
import { useMemo, 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 = useMemo(() => screens[curScreenIndex], [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);

        // await fetch(`/api/projects/${project.id}/screens`, {
        //     method: "POST",
        //     headers: {
        //         'Content-Type': 'application/json',
        //     },
        //     body: JSON.stringify({
        //         newScreen: newScreen
        //     }),
        // });
        return newScreenId;
    };

    const deleteScreen = async (index: number) => {
        setCurScreenIndex(0);
        // const screenId = screens[index].id;
        // await fetch(`/api/projects/${project.id}/screens/${screenId}`, { method: "DELETE" })
        setScreens((prev) => prev.filter((_, i) => i !== index));
    }

    const updateScreen = async (index: number, name: string) => {
        // const screenId = screens[index].id;
        // await fetch(`/api/projects/${project.id}/screens/${screenId}`, {
        //     method: "PUT",
        //     headers: {
        //         'Content-Type': 'application/json',
        //     },
        //     body: JSON.stringify({
        //         name: name,
        //     }),
        // })
        setScreens((prev) => prev.map((item, i) => i === index ? { ...item, name: name } : item));
    }

    return {
        screenState: {
            screens,
            curScreenIndex,
            curScreen
        },
        screenActions: {
            setCurScreenIndex,
            addScreen,
            updateScreen,
            deleteScreen
        },
        screenDispatch: {
            setScreens
        }
    }

}