import { StartButton } from "./start"
import { Time } from "./time"
import { Task, taskManager } from "$/desktop"
import { useCallback } from "preact/hooks"
import { useLiveSignal } from "@preact/signals/utils";

function TaskButton({ task }: TaskButton.Props) {
    const source = useLiveSignal(task.source);
    const title = useLiveSignal(task.title);

    const handleClick = useCallback(() => {
        task.window.minimized.value = !task.window.minimized.value;
        taskManager.focusWindow(task)
    }, [])

    return <li>
        <button onClick={handleClick}>
            <img src={`/assets/${source.value.value.type}.png`} />
            <div>{title.value.value ?? "[404 Title Not Found]"}</div>
        </button>
    </li>
}

namespace TaskButton {
    export type Props = {
        task: Task
    }
}

export function Taskbar() {
    const sortedTasks = [...taskManager.tasks.value.value].sort((a, b) => a.id - b.id);

    return <nav>
        <StartButton />
        <ul>
            { sortedTasks.map(task => <TaskButton task={task}/>)}
        </ul>
        <Time />
        <div id="netpunk_descender"></div>
    </nav>
}