import { $, component$, noSerialize, NoSerialize, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { useNanostore$ } from "~/hooks/nanostores";
import { api } from "~/lib/api";
import { DashboardFiles } from "~/lib/stores";
import { StereoFile } from "~/lib/types";
import { SolarUploadLinear } from "./Icons";

export default component$(() => {
    const files = useNanostore$<StereoFile[]>(DashboardFiles);
    const fileInputRef = useSignal<HTMLInputElement>();
    const uploadingFile = useSignal<NoSerialize<File> | undefined>();
    const now = useSignal(new Date());

    useVisibleTask$(() => {
        const interval = setInterval(() => {
            now.value = new Date();
        }, 500);
        return () => clearInterval(interval);
    });

    const uploadFile = $(async () => {
        if (!uploadingFile.value) {
            console.error("No file selected for upload.");
            return;
        }

        try {
            await api.upload(uploadingFile.value as File)
            files.value = await api.list();
        } catch (error) {
            console.error("Error uploading file:", error);
        }
    })
    return (
        <div class="z-[999999999] fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-neutral-950/50 backdrop-blur-3xl w-1/3 p-2 rounded-lg flex items-center justify-between">
            <input 
                type="file" 
                ref={fileInputRef}
                style="display: none;"
                onChange$={async (e: Event) => {
                    uploadingFile.value = noSerialize((e.target as HTMLInputElement).files![0]);
                    await uploadFile();
                }}
            />
            
            <div class="flex items-center gap-1">
                <button
                    class="duration-100 hover:bg-white text-white hover:text-black p-2 rounded-lg"
                    onClick$={() => { fileInputRef.value?.click() }}
                >
                    <SolarUploadLinear class="w-6 h-6" />
                </button>
            </div>
            <p class="text-white font-medium">{now.value.toLocaleTimeString()}</p>
        </div>
    )
})