<script setup lang="ts">
import { getRecentLists } from "@/lib/lists";
import { ArrowBigRightDashIcon, DicesIcon, HistoryIcon } from "@lucide/vue";
import { generateSlug } from "random-word-slugs";
import { defineAsyncComponent, onBeforeMount, ref } from "vue";
import { onBeforeRouteUpdate } from "vue-router";
const RecentItem = defineAsyncComponent(
    () => import("@/components/RecentItem.vue"),
);

const listNameInput = ref<string>(generateSlug(4));
const recentLists = ref<string[]>(getRecentLists());

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 italic text-xl font-extralight"
    >{{ $t('home') }}<br/>{{ $t('call_to_action') }}</div>
    <div class="flex gap-2 p-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"
            :class="listNameInput.trim().length === 0 ? 'btn-disabled' : ''"
            :to="`/${listNameInput.trim()}`"
        >
            <arrow-big-right-dash-icon class="inline" />
            {{ $t("home_button") }}
        </router-link>
    </div>
    <div v-if="recentLists.length" class="collapse collapse-arrow font-light text-sm">
        <input id="recent-dropdown" type="checkbox" />
        <div class="collapse-title">
            <history-icon class="inline" :size="16" />
            {{ $t("recent") }}
        </div>
        <div class="collapse-content">
            <recent-item v-for="(list, i) in recentLists" :key="`recent-${i}`" :list="list" />
        </div>
    </div>
</template>
