<script setup>
import { router, useForm } from "@inertiajs/vue3";
import TextInput from "../TextInput.vue";
import { ref } from "vue";
import { onMounted } from "vue";

const query = ref("");

let parameters = "";

const onChange = () => {
    parameters.set("search", query.value);
    router.get(`${window.location.pathname}?${parameters.toString()}`);
};

onMounted(() => {
    parameters = new URLSearchParams(window.location.search);
    query.value = parameters.get("search");
});
</script>

<template>
    <div class="w-full h-[5rem] flex items-center">
        <TextInput
            type="text"
            class="block w-full mr-2"
            v-model="query"
            autocomplete
            placeholder="Search for files or folders"
            @keyup.enter.prevent="onChange()"
        ></TextInput>
    </div>
</template>
