<script setup lang="ts">
import { ref } from "vue";
import { useMainStore } from "@/stores/main";
import { storeToRefs } from "pinia";
import { required, emailRules } from "@/utils";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const valid = ref(true);
const fullName = ref("");
const email = ref("");
const phone = ref("");
const feedback = ref("");
const form = ref(null);

const phoneRules = [(v: any) => /^(09\d{8})?$/i.test(v) || "請輸入有效的號碼"];

const mainStore = useMainStore();
const mainStoreRef = storeToRefs(mainStore);
const userProfile = mainStoreRef.readUserProfile;

if (userProfile) {
  if (typeof userProfile.value?.full_name === "string") {
    fullName.value = userProfile.value.full_name;
  } else {
    fullName.value = "";
  }
  email.value = userProfile.value!.email;
}

async function submit() {
  await (form as any).value.validate();
  //   if (valid.value) {
  //     await mainStore.updateUserProfile(updateProfile);
  //   }
}
</script>

<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title>
        <h3 class="card-title">{{ t("contactUs") }}</h3>
      </v-card-title>
      <v-card-text class="pt-3">
        <v-form ref="form" v-model="valid">
          <v-text-field
            :label="$t('userName')"
            v-model="fullName"
            :rules="required()"
            required
          ></v-text-field>
          <v-text-field
            :label="$t('emailAddress')"
            type="email"
            v-model="email"
            :rules="emailRules()"
            required
          ></v-text-field>
          <v-text-field
            :label="$t('phoneNumber')"
            type="tel"
            v-model="phone"
            :rules="phoneRules"
          ></v-text-field>
          <v-textarea
            :label="$t('feedback')"
            v-model="feedback"
            :rules="required()"
            placeholder="請告訴我們您的使用體驗，您可以在此回報問題、提出功能建議，我們廣納接受各式建議與想法，請從填寫簡短描述開始"
            required
          ></v-textarea>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="submit">{{ t("send") }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>
