<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import exampleFilenames from '../../constants/filenames.ts'
import formatDictionaryAsString from '../../utils/formatting.ts'

const filename = ref('')
const code = ref(`{
  result: 'Fill the input with the filename and click Guess'
}`)

const url = `${import.meta.env.VITE_HOST_URL}`

const setRandomFilename = () => {
    filename.value = exampleFilenames[Math.floor(Math.random() * exampleFilenames.length)];
    getFilenameData()
}

const getFilenameData = () => {
    const data = { 
        filename: filename.value
    }

    axios.get(url, { params: data })
        .then(response => {
            code.value = formatDictionaryAsString(response.data)
        })
        .catch((error) => {
            console.log(error)
        })
}

</script>

<template>
    <div class="flex flex-col gap-12 flew-grow text-center md:w-[600px] bg-[#2e3440] rounded-lg text-neutral-100 shadow pt-12 pb-6">
        <div class="space-y-12 px-12">
            <div class="flex flex-col items-center justify-center gap-4">
                <h2 class="text-4xl font-semibold">
                    guessit
                </h2>
                <p>
                    A web app that guesses info about a video file based on its filename.
                </p>
            </div>
            <div class="space-y-4 text-neutral-700">
                <div class="text-sm flex w-full">
                    <div class="flex-grow">
                        <input v-model="filename" type="text" class="bg-neutral-100 p-3 rounded-l appearance-none focus:outline-none w-full shadow" placeholder="Enter the filename">
                    </div>
                    <button class="bg-slate-200 px-4 py-3 rounded-r shadow font-semibold hover:bg-slate-300" @click="getFilenameData">
                        Guess
                    </button>
                </div>
                <div class="flex flex-wrap justify-center text-sm gap-4">
                    <a href="#/">
                        <div class="bg-slate-200 rounded shadow px-4 py-2 font-semibold hover:bg-slate-300" @click="setRandomFilename">
                            Try a random filename
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="text-left text-sm rounded px-4">
            <highlightjs :code="code" ref="codeRef" />
        </div>
    </div>
</template>
