import { For, createMemo } from "solid-js";
import { ScanData, ScanResult } from ".";
import { FilledButton } from "../components/FilledButton";
import { FilledCard } from "../components/FilledCard";
import { LoadingIcon } from "../icons/LoadingIcon";
import { PDFIcon } from "../icons/PDFIcon";
import { LoadingStatus, useLoading } from "../utils/functions";

export function ScansList(props: {scanData: ScanData | null}) {
    const {status, setStatus, error, setError} = useLoading();

    const loading = createMemo(() => status() === LoadingStatus.Loading);

    const convertScans = () => {
        setStatus(LoadingStatus.Loading);

        if (props.scanData === null) {
            setError("No se detectaron escaneos");
            setStatus(LoadingStatus.Error);
            return;
        }


        fetch(
            `${import.meta.env.VITE_BACKEND_URL}/api/scans/convert`,
            {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(props.scanData),
            },
        )
            .then((res) => res.json())
            .then((res) => {
                setStatus(LoadingStatus.Ok);
                console.log(res);
            })
            .catch((err) => {
                setStatus(LoadingStatus.Error);
                console.error(err);
            });
    };

    return (
        <FilledCard class="border border-c-outline overflow-hidden">
            <h1 class="p-3 font-medium text-xl">
                        Escaneos detectados
            </h1>

            <div class="bg-c-surface py-2">
                <For each={props.scanData?.Ok ?? []}>
                    {([path, result]) => (
                        <p class="py-1 px-4 hover:bg-c-surface-variant transition-colors">
                            <span class="font-mono">
                                {path.substring(path.lastIndexOf("/") + 1)}
                            </span>
                            <br />
                            {dataFromScanResult(result)}
                        </p>
                    )}
                </For>
            </div>

            <p class="p-4">
                        - Al convertir los escaneos a PDF se eliminan los archivos JPG.
                <br />
                        - Solo se convertiran los escaneos mostrados en esta lista.
                <br />
                        - En la lista se muestran los nombres originales de los archivos.
                        Sin embargo, en el disco se cambiaron de nombre para asegurarse de
                        que solo 1 persona pueda transformarlos a la vez.
            </p>

            <div class="relative mx-4 mb-4">
                <FilledButton
                    onClick={convertScans}
                    disabled={loading()}
                >
                    <span
                        class="absolute top-[1.35rem] left-2"
                        style={{display: loading() ? "none" : "inline-block"}}
                    >
                        <PDFIcon
                            fill="var(--c-on-primary)"
                        />
                    </span>
                    <span
                        class="absolute top-[1.35rem] left-2"
                        style={{display: loading() ? "inline-block" : "none"}}
                    >
                        <LoadingIcon
                            class="animate-spin"
                            fill="var(--c-primary-container)"
                        />
                    </span>

                    <span class="ml-5">
                                Convertir escaneos
                    </span>
                </FilledButton>
            </div>
        </FilledCard>
    );
}


function dataFromScanResult(result: ScanResult) {
    if ("Full" in result) {
        return `DNI: ${result.Full[0]}, iid: ${result.Full[1]}`;
    } else if ("Partial" in result) {
        return `DNI: ${result.Partial[0]}`;
    } else if ("Error" in result) {
        return `Error: ${result.Error}`;
    }
}