<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useMainStore } from "@/stores/main";
import { storeToRefs } from "pinia";
import router from "@/router";
import type { IUserProfileUpdate } from "@/interfaces";
import {
  emailRules,
  nameRules,
  password1Rules,
  usePassword2Rules,
} from "@/utils";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const mainStore = useMainStore();
const mainStoreRef = storeToRefs(mainStore);
const userProfile = mainStoreRef.readUserProfile;

const valid = ref(true);
const validPassword = ref(true);
const fullName = ref("");
const email = ref("");
const form = ref(null);
const password1 = ref("");
const password2 = ref("");
const password2Rules = usePassword2Rules(password1);

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

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

function resetPassword() {
  password1.value = "";
  password2.value = "";
}

function cancel() {
  router.back();
}

// 編輯資料
async function submit() {
  await (form as any).value.validate();
  if (valid.value) {
    const updateProfile: IUserProfileUpdate = {};
    if (fullName.value) {
      updateProfile.full_name = fullName.value;
    }
    if (email.value) {
      updateProfile.email = email.value;
    }
    await mainStore.updateUserProfile(updateProfile);
    router.push("/main/dashboard");
  }
}

// 變更密碼
async function submitPassword() {
  await (form as any).value.validate();
  if (validPassword.value) {
    const updatedProfile: IUserProfileUpdate = {};
    updatedProfile.password = password1.value;
    await mainStore.updateUserProfile(updatedProfile);
    router.push("/main/dashboard");
  }
}

// onMounted(() => {
//   (form as any).value.validate();
// });
</script>

<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title>
        <h3 class="card-title">{{ t("editUserProfile") }}</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="nameRules"
            required
          ></v-text-field>
          <v-text-field
            :label="$t('emailAddress')"
            type="email"
            v-model="email"
            :rules="emailRules()"
            required
          ></v-text-field>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="cancel">{{ t("cancel") }}</v-btn>
        <v-btn @click="reset">{{ t("reset") }}</v-btn>
        <v-btn @click="submit" :disabled="!valid">{{ t("save") }}</v-btn>
      </v-card-actions>
    </v-card>
    <v-card class="mt-7 ma-3 pa-3">
      <v-card-title primary-title class="mb-3">
        <h3 class="headline primary--text">{{ t("changePassword") }}</h3>
      </v-card-title>
      <v-card-text>
        <v-form ref="form" v-model="validPassword">
          <v-text-field
            type="password"
            ref="password"
            :label="$t('newPassword')"
            v-model="password1"
            :rules="password1Rules"
          >
          </v-text-field>
          <v-text-field
            type="password"
            :label="$t('confirmNewPassword')"
            :rules="password2Rules"
            v-model="password2"
          >
          </v-text-field>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="cancel">{{ t("cancel") }}</v-btn>
        <v-btn @click="resetPassword">{{ t("clear") }}</v-btn>
        <v-btn @click="submitPassword" :disabled="!validPassword">{{
          t("save")
        }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>
