<script setup lang="ts">
import { ArrowBigRightDashIcon, DicesIcon } from "@lucide/vue";
import { generateSlug } from "random-word-slugs";
import { onBeforeMount, ref } from "vue";
import { onBeforeRouteUpdate } from "vue-router";

const listNameInput = ref<string>(generateSlug(4));

function onRandom() {
    listNameInput.value = generateSlug(4);
}

function onInput() {
    listNameInput.value = listNameInput.value
        .normalize("NFD")
        .replace(/[\s_]/g, "-")
        .replace(/[^a-z0-9-]/g, "")
        .toLowerCase();
}

function updateTitle() {
    document.title = 'Tout Doux';
}

onBeforeMount(updateTitle)
onBeforeRouteUpdate(updateTitle);
</script>

<template>
    <div class="p-4">
        <div
            class="mb-4 italic text-xl font-extralight"
            v-html="$t('home')"
        ></div>
        <div class="flex gap-2 mb-4">
            <input
                v-model="listNameInput"
                type="text"
                :placeholder="$t('new_task_hint')"
                class="input grow"
                @input="onInput"
            />
            <button class="btn btn-square" @click="onRandom">
                <dices-icon />
            </button>
        </div>
        <div class="w-full">
            <router-link
                class="btn btn-lg px-4"
                :class="listNameInput.trim().length === 0 ? 'btn-disabled' : ''"
                :to="`/${listNameInput.trim()}`"
            >
                <arrow-big-right-dash-icon class="inline" />
                {{ $t("home_button") }}
            </router-link>
        </div>
    </div>
</template>
