/* eslint-disable qwik/jsx-a */
import { $, component$, useSignal } from "@builder.io/qwik";
import { useNanostore$ } from "~/hooks/nanostores";
import { api } from "~/lib/api";
import { isSettingsOpen, loadedFiles } from "~/lib/stores";
import { StereoFile } from "~/lib/types";
import { SolarLibraryLinear, SolarQuestionCircleLinear, SolarRoundedMagniferLinear, SolarSettingsLinear, SolarUploadMinimalisticLinear, StereoCircularProgress, StereoLogoLinear } from "../misc/Icons";

export default component$(() => {
    const used = 3.8;
    const total = 15;

    const settingsOpen = useNanostore$<boolean>(isSettingsOpen);
    const fileInputRef = useSignal<HTMLInputElement>();
    const files = useNanostore$<StereoFile[]>(loadedFiles, []);
    
    const handleFileChange = $(async (event: Event) => {
        const input = event.target as HTMLInputElement;
        if (input.files && input.files.length > 0) {
            const fi: File[] = Array.from(input.files);
            
            const metas: StereoFile[] = await Promise.all(
                fi.map(async (file) => {
                    try {
                        const id = (await (await api.upload(file)).json()).id;
                        return await api.meta(id);
                    } catch (error) {
                        console.error("actionbar: file upload failed:", error);
                        throw new Error("File upload failed");
                    }
                })
            );

            input.value = "";
            files.value = [...files.value, ...metas].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
        }
    });

    return (
        <div class="absolute bottom-0 left-0 flex items-center justify-between py-7 px-16 w-full">
            <div style={{
                borderRadius: "999px",
                border: "0.5px solid #FF264E",
                background: "rgba(255, 38, 78, 0.15)",
                boxShadow: "0px 4px 20px 0px rgba(255, 38, 78, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(255, 38, 78, 0.12) inset, 0px 1px 3px 0px rgba(255, 38, 78, 0.24) inset",
                backdropFilter: "blur(12px)",
            }} class="flex items-center justify-center px-6 py-4 h-full gap-2 text-white text-xl">
                <StereoCircularProgress value={used/total} class="text-2xl"/>
                <p class="hidden md:block">{used} / {total} GB</p>
            </div>

            <div style={{
                borderRadius: "999px",
                border: "0.5px solid #FF264E",
                background: "rgba(255, 38, 78, 0.15)",
                boxShadow: "0px 4px 20px 0px rgba(255, 38, 78, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(255, 38, 78, 0.12) inset, 0px 1px 3px 0px rgba(255, 38, 78, 0.24) inset",
                backdropFilter: "blur(12px)",
            }} class="flex items-center justify-center px-6 py-4 gap-5 text-white text-3xl absolute left-1/2 transform -translate-x-1/2">
                <StereoLogoLinear />
                <SolarLibraryLinear />
                <a
                    onClick$={(e) => {
                        e.preventDefault();
                        fileInputRef.value?.click();
                    }}
                >
                    <SolarUploadMinimalisticLinear />
                </a>
                <SolarRoundedMagniferLinear />
                <a onClick$={() => settingsOpen.value = true}><SolarSettingsLinear /></a>
            </div>

            <input
                ref={fileInputRef}
                type="file"
                class="hidden"
                onChange$={handleFileChange}
            />

            <div style={{
                borderRadius: "999px",
                border: "0.5px solid #FF264E",
                background: "rgba(255, 38, 78, 0.15)",
                boxShadow: "0px 4px 20px 0px rgba(255, 38, 78, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(255, 38, 78, 0.12) inset, 0px 1px 3px 0px rgba(255, 38, 78, 0.24) inset",
                backdropFilter: "blur(12px)",
            }} class="flex items-center justify-center p-4 gap-2 text-white text-3xl h-full">
                <SolarQuestionCircleLinear />
            </div>
        </div>
    )
})