<script setup lang="ts">
import type { FileUploadUploadEvent } from '~/node_modules/primevue/fileupload/FileUpload.d.ts'
interface SvgContext {
    paths: string[],
    width: number,
    height: number
}
const config = useRuntimeConfig()
const plan: Ref<SvgContext | {}> = useState('plan', () => ({}));

const loading = ref<boolean>(false)
const canvasElement: Ref<HTMLCanvasElement | undefined> = ref();
const context: Ref<CanvasRenderingContext2D | undefined> = ref();

const beforeUpload = () => {
    loading.value = true
}

const onUpload = (event: FileUploadUploadEvent) => {
    loading.value = false
    try {
        const data = JSON.parse(event.xhr.response)
        plan.value = data.response

        context.value = canvasElement.value?.getContext('2d') || undefined;
        if (canvasElement.value && context.value) {
            context.value.clearRect(0, 0, canvasElement.value.width, canvasElement.value.height);
            if (!plan.value.hasOwnProperty('paths')) return
            plan.value.paths.forEach((path: string) => {
                if (!context.value) return
                context.value.fillStyle = 'rgba(255, 0, 0, 0.25)'
                context.value.fill(new Path2D(path));

                context.value.strokeStyle = 'blue'
                context.value.stroke(new Path2D(path));
            });
        }
    } catch (error) {
        console.error(error)
    }
}
</script>
<template>
    <div class="flex flex-col gap-4">
        <Panel>
            <FileUpload mode="basic" name="demo" :url="`${config.public.apiBase}/api/prepare_image`" accept="image/*"
                :maxFileSize="10000000" @upload="onUpload" @before-upload="beforeUpload" :auto="true"
                chooseLabel="Выберите файл" :disabled="loading" />
        </Panel>
        <Panel v-if="plan && plan.paths">
            <canvas ref="canvasElement" width="1200" height="1000"></canvas>
        </Panel>
    </div>
</template>