<template>
    <IonPage>
        <IonHeader>
            <IonToolbar>
                <IonButtons slot="start">
                    <IonBackButton text="" />
                </IonButtons>
                <IonTitle>Feedback</IonTitle>
            </IonToolbar>
        </IonHeader>
        <IonContent>
            <div class="px-4 mt-8">
                <textarea
                    v-model="desc"
                    placeholder="Feedback description"
                    class="block bg-neutral-800 w-full p-4 rounded-md outline-prim h-28 resize-none"
                />

                <input
                    v-model="email"
                    inputmode="email"
                    type="email"
                    placeholder="Email address"
                    class="mt-4 bg-neutral-800 h-10 w-full p-4 rounded-md outline-prim"
                />

                <button
                    class="mt-6 w-full h-10 bg-prim text-white rounded-md font-bold"
                    @click="submit"
                >
                    Submit
                </button>
            </div>
        </IonContent>
    </IonPage>
</template>
<script setup lang="ts">
import toast from "@/plugins/toast";
import {
    IonPage,
    IonContent,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonLabel,
    IonButtons,
    IonBackButton,
    useIonRouter,
} from "@ionic/vue";
import { isEmail } from "validator";
import { ref } from "vue";
const desc = ref("");
const email = ref("");
const router = useIonRouter();
function submit() {
    if (!desc.value) {
        toast("Please enter feedback description", {
            type: "error",
        });
        return;
    }
    if (!isEmail(email.value)) {
        toast("Please enter a valid email address", {
            type: "error",
        });
        return;
    }
    toast("Feedback submitted", {
        type: "success",
    });
    setTimeout(() => {
        router.back();
    }, 1000);
}
</script>
<style lang="less" scoped></style>
