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

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

export const Audio = memo(function Audio({ source, title, contentReady }: Image.Props) {
    useEffect(() => {
        contentReady.value = true
    }, [])

    useSignalEffect(() => {
        const filename = decodeURIComponent(source.value.link.pathname.match(filenameRegex)?.[1] ?? source.value.link.toString());
        title.value = `${filename} - tunez player`;
    })


    return <audio controls src={source.value.link.toString()}></audio>
})

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