import { useCallback } from "preact/hooks"
import { getTaskId, taskManager } from ".";
import { signal } from "@preact/signals";
import { Address } from "$/apps/source";
import { APP_REGISTRY } from "$/apps";
import { ComponentChildren } from "preact";

export function Link(props: Link.Props) {
    const onClick = useCallback((e: MouseEvent) => {
        if (props.external) {
            return
        }
        let app = APP_REGISTRY[props.type];
        if (app === undefined) {
            console.error(`couldn't find app for file of type "${props.type}"`)
            return
        }

        taskManager.add({
            app,
            source: signal({
                type: props.type,
                link: new URL(props.link),
                pixelated: props.pixelated
            } as Address),
            window: {
                minimized: signal(false),
                maximized: signal(false),
                height: props.type === "link" ? "40vh" : undefined,
                width: props.type === "link" ? "40vw" : undefined,
                z: signal(taskManager.tasks.value.value.length)
            },
            title: signal(undefined),
            id: getTaskId(),
            contentReady: signal(false),
            sizingFinished: signal(false)
        })
        e.preventDefault();
    }, [])

    const content = <a target="_blank" rel="noreferrer noopener" onClick={onClick} href={props.link}>
        { props.children ?? props.link }
    </a>

    if (props.type === "image" || props.type === "video" || props.type === "audio" || props.block) {
        return <div class="link">{content}</div>
    } else {
        return content
    }
}

namespace Link {
    export type Props = {
        link: string,
        alt?: string,
        type: "video" | "image" | "link" | "audio",
        block?: boolean,
        pixelated?: boolean,
        external?: boolean,
        children?: ComponentChildren
    }
}