import { effect, Signal, useSignalEffect } from "@preact/signals"
import { Address } from "$/apps/source";
import { memo, Ref, useRef } from "preact/compat";

const filenameRegex = /.*\/(.*)$/;

export const Video = memo(function Video({ source, title, contentReady, sizingFinished }: Video.Props) {
    useSignalEffect(() => {
        const filename = decodeURIComponent(source.value.link.pathname.match(filenameRegex)?.[1] ?? source.value.link.toString());
        title.value = `${filename} - media player`;
    })

    const videoRef: Ref<HTMLVideoElement> = useRef(null);

    return <video controls src={source.value.link.toString()} ref={video => {
        videoRef.current = video
        const id = setInterval(() => {
            if (video && video.videoWidth) {
                clearInterval(id)
                contentReady.value = true
                const vw = Math.max(document.documentElement.clientWidth, window.innerWidth)
                const vh = Math.max(document.documentElement.clientHeight, window.innerHeight)

                const maxImageSize = Math.min(vw, vh) * 0.4;
                const smallestImageAxis = Math.min(video.videoHeight, video.videoWidth);
                
                const aspectRatio = video.videoWidth / video.videoHeight
                if (smallestImageAxis > maxImageSize) {
                    if (video.videoWidth > video.videoHeight) {
                        video.style.height = `${maxImageSize / aspectRatio}px`
                        video.style.width = `${maxImageSize}px`
                    } else {
                        video.style.height = `${maxImageSize}px`
                        video.style.width = `${maxImageSize * aspectRatio}px`
                    }

                    effect(() => {
                        if (sizingFinished.value) {
                            video!.style.setProperty("height", null)
                            video!.style.setProperty("width", null)
                        }
                    })
                }
            }
        }, 50)

        return () => {
            clearInterval(id)
            videoRef.current = null
        }
    }}/>
})

namespace Video {
    export type Props = {
        source: Signal<Address>,
        title: Signal<string | undefined>,
        contentReady: Signal<boolean>,
        sizingFinished: Signal<boolean>
    }
}