<!doctype html>
<title>pic_resizer</title>

<head>
    <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
    <script type="importmap">
    {
        "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
    }
    </script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="module">
        import { createApp, ref } from 'vue'

        createApp({
            setup() {
                const size = ref('100')
                const file = ref()
                const unit = ref('k')

                async function fileChange(event) {
                    file.value = event.target.files[0]
                }

                function handleClick() {
                    let filename = ''
                    const data = new FormData()
                    if (!file.value) {
                        alert('Please select a image file!')
                        return
                    }
                    data.append('file', file.value)
                    data.append('size', `${size.value}${unit.value}`)
                    fetch('/upload', {
                        method: 'POST',
                        body: data,
                    }).then(res => {
                        if (!res.ok) {
                            return res.text().then(text => { throw new Error(text) })
                        }
                        const header = res.headers.get('Content-Disposition')
                        const parts = header.split(';')
                        filename = parts[1].split('=')[1].replaceAll("\"", "")
                        return res.blob()
                    })
                        .then(
                            blob => {
                                const file = window.URL.createObjectURL(blob)
                                const a = document.createElement('a')
                                a.href = file
                                a.download = filename
                                document.body.appendChild(a)
                                a.click()
                                alert('Downloading...')
                                a.remove()
                            }
                        ).catch(
                            error => {
                                console.error(error)
                                alert(error)
                            }
                        )
                }

                return {
                    size,
                    fileChange,
                    unit,
                    handleClick
                }
            }
        }).mount('#app')
    </script>
</head>

<body class="flex justify-center flex-col items-center">
    <h2 class="mt-10 text-3xl font-bold">pic_resizer</h2>
    <div id="app" class="bg-gray-300 mt-10 space-y-20 flex justify-center flex-col items-center border w-96 h-96">
        <div class="space-y-1 flex justify-center flex-col items-center">
            <input class="rounded border-2 border-blue-500" @change="fileChange" type="file" accept="image/*">
            <div class="space-x-1">
                <label for="size">target size:</label>
                <input class="text-right rounded border-2 border-blue-500" size="3" id="size" v-model="size"
                    type="text">
                <select class="rounded border-2 border-blue-500" v-model="unit">
                    <option>k</option>
                    <option>m</option>
                </select>
            </div>
        </div>
        <button @click="handleClick"
            class="px-4 py-2 font-semibold text-sm bg-blue-500 text-white rounded-md shadow-sm hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 ease-in-out delay-150 duration-300">submit</button>
    </div>
</body>

</html>
