import "$/apps" // registers all of the apps;
import { useRef } from "preact/hooks"
import { Window } from "./window"
import { FILE_REGISTRY } from "./files";
import { Source } from "$/apps/source";
import { App } from "$/apps";
import { createModel, Signal, signal } from "@preact/signals";
import { MutableValue } from "$/util";
import { File } from "./file";
import { StartMenu } from "./start";

export type Task = {
    app: App,
    source: Signal<Source>,
    window: {
        minimized: Signal<boolean>,
        maximized: Signal<boolean>
        width?: string | number;
        height?: string | number;
        position?: {
            x?: string | number;
            y?: string | number;
        },
        z: Signal<number>;
    }
    title: Signal<string | undefined>,
    id: number;
    contentReady: Signal<boolean>,
    sizingFinished: Signal<boolean>
}

const TaskManagerModel = createModel(() => {
    const tasks: Signal<MutableValue<Task[]>> = signal(new MutableValue([]))

    return {
        tasks,
        close(currentTask: Task) {
            tasks.value = tasks.value.deriveNew(self => {
                const idx = self.findIndex(task => {
                    return currentTask === task
                })
                self.splice(idx, 1);
                return self
            })
        },
        focusWindow(currentTask: Task) {
            const t = tasks.value.value;
            const currentTaskZ = currentTask.window.z.value;

            for (const task of t) {
                if (task === currentTask) {
                    task.window.z.value = t.length - 1
                } else if (task.window.z.value > currentTaskZ) {
                    task.window.z.value = task.window.z.value - 1
                }
            }
        },
        add(task: Task) {
            tasks.value = tasks.value.deriveNew(self => {
                self.push(task)
                return self
            })
        }
    }
})
export const taskManager = new TaskManagerModel();

let taskCounter = 0;
export function getTaskId(): number {
    return taskCounter++;
}

export function Desktop() {
    const ref = useRef(null);

    return <div id="desktop" ref={ref}>
        <div class="icon_list">
            { FILE_REGISTRY.map(file => <File file={file} />)}
        </div>
        { taskManager.tasks.value.value.map(task => {
            const App = task.app;
            return <Window
                key={task.id}
                task={task}
                desktop={ref}
                onFocus={taskManager.focusWindow}
                onClose={taskManager.close}
            >
                <App
                    title={task.title}
                    source={task.source}
                    contentReady={task.contentReady}
                    sizingFinished={task.sizingFinished}
                />
            </Window>
        })}
        <StartMenu />
        <img id="netpunk" src="/assets/netpunk.png" />
    </div>
}