import {AppShell, Group, Stack, Text} from "@mantine/core";
import {Dropzone} from "@mantine/dropzone";
import {IconJson, IconUpload, IconX} from "@tabler/icons-react";

import {LoadProtocol} from "../pywebview.ts";
import {useTrainingProtocol} from "../hooks/useTrainingProtocol.ts";

export const App =() => {
    const protocol = useTrainingProtocol();

    console.log(protocol);

    const onFileReceived = (acceptedFiles: File[]) => {
        if (acceptedFiles && acceptedFiles.length > 0) {
            const reader = new FileReader();
            reader.onload = ((data: ProgressEvent) => {
                if (data.loaded == data.total) {
                    LoadProtocol(acceptedFiles[0].name, reader.result as string);
                }
            });
            reader.readAsText(acceptedFiles[0]);
        }
    }

    return (
        <AppShell padding="md" header={{height: 44}}>
            <AppShell.Header bg="rgb(43, 43, 43)">
                <Group p={8} align="center">
                    <Text c="white" size="lg" fw={500}>Training Protocol Simulator</Text>
                </Group>
            </AppShell.Header>
            <AppShell.Main>
                <Stack>
                    <Group align="stretch">
                        <Dropzone w={"100%"} accept={["application/json"]} onDrop={onFileReceived}>
                            <Group justify="center" gap="xl" mih={120} style={{pointerEvents: 'none'}}>
                                <Dropzone.Accept>
                                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5}/>
                                </Dropzone.Accept>
                                <Dropzone.Reject>
                                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5}/>
                                </Dropzone.Reject>
                                <Dropzone.Idle>
                                    <IconJson size={52} color="var(--mantine-color-dimmed)" stroke={1.5}/>
                                </Dropzone.Idle>
                                <div>
                                    <Text size="xl" inline>
                                        Drag a training protocol json file here or click to select files
                                    </Text>
                                    <Text size="sm" c="dimmed" inline mt={7}>
                                        Training protocol files are typically found in ~/Autotrainer/training/protocols/
                                    </Text>
                                    <Text size="sm" c="dimmed" inline mt={7}>
                                        {protocol?.planId}
                                    </Text>
                                </div>
                            </Group>
                        </Dropzone>
                    </Group>
                </Stack>
            </AppShell.Main>
            <AppShell.Footer>
                <Group p={8} bg="rgb(43, 43, 43)">
                    <Text size="xs" c="white">Mouse-GYM</Text>
                </Group>
            </AppShell.Footer>
        </AppShell>
    )
}
