<script setup lang="ts">
import { appName, openRegisration } from "@/env";
import { ref, reactive, computed, onMounted } from "vue";
import { useMainStore } from "@/stores/main";
import { useDisplay } from "vuetify";
import { storeToRefs } from "pinia";
import { useI18n } from "vue-i18n";
import Navbar from "@/components/Navbar.vue";

const mainStore = useMainStore();
const mainStoreRef = storeToRefs(mainStore);

// variable
const email = ref("");
const password = ref("");
const { name } = useDisplay();
const { t } = useI18n();
const confirmPassword = ref("");
let data = reactive({
  email: "",
  password: "",
  full_name: ""
});
let dialog = ref(false);
let confirmState = ref(false);
let showPassword = ref(false);
let showConfirmPassword = ref(false);

// getter
const loginError = mainStoreRef.readLoginError;
const width = computed(() => {
  // name is reactive and
  // must use .value
  switch (name.value) {
    case "xs":
      return 12;
    case "sm":
      return 12;
  }
  return 6;
});

// action
async function submit() {
  if (confirmPassword.value === data.password) {
    console.log("data", data.password);
    mainStore.register(data);
  } else {
    confirmState.value = true;
    setTimeout(() => {
      confirmState.value = false;
    }, 5000);
  }
}
</script>

<template>
  <Navbar />

  <v-container fluid class="pa-0">
    <v-row align="center" no-gutters class="overflow-hidden">
      <v-col :cols="width">
        <section class="overflow-hidden banner-item">
          <img src="../assets/img/banner.png" alt="" />
          <h2>
            {{ t("describe_1") }}
            <br />
            {{ t("describe_2") }}
          </h2>
        </section>
      </v-col>
      <v-col :cols="width" class="px-6 my-8 my-md-0">
        <div class="form-title">
          <h3>{{ t("register") }}</h3>
          <span></span>
        </div>
        <v-form ref="form" class="login-form" lazy-validation>
          <v-text-field
            v-model="data.full_name"
            :rules="[(v) => !!v || '請輸入您的帳號']"
            label="使用者名稱"
            required
          ></v-text-field>

          <v-text-field
            v-model="data.email"
            :rules="[(v) => !!v || '請輸入您的電子信箱']"
            :label="$t('emailAddress')"
            required
          ></v-text-field>

          <v-text-field
            v-model="data.password"
            :append-icon="showPassword ? 'visibility' : 'visibility_off'"
            :rules="[(v) => !!v || '請輸入您的密碼']"
            :type="showPassword ? 'text' : 'password'"
            :label="$t('registerPassword')"
            :hint="$t('passwordLength')"
            @click:append="showPassword = !showPassword"
            required
          ></v-text-field>

          <v-text-field
            v-model="confirmPassword"
            :append-icon="showConfirmPassword ? 'visibility' : 'visibility_off'"
            :rules="[(v) => !!v || '請輸入您的密碼']"
            :type="showConfirmPassword ? 'text' : 'password'"
            :label="$t('confirmPassword')"
            :hint="$t('passwordConfirm')"
            @click:append="showConfirmPassword = !showConfirmPassword"
            required
          ></v-text-field>

          <v-alert v-model="confirmState" type="error" variant="outlined">
            該密碼與您輸入的確認密碼不一致
          </v-alert>

          <p class="text-center">
            {{ t("haveAccount") }}
            <router-link to="/login"> {{ t("login") }}</router-link>
          </p>

          <v-btn
            rounded="pill"
            color="primary"
            @click.prevent="submit"
            class="login-btn"
          >
            {{ t("registerLink") }}
          </v-btn>

          <section
            class="mt-5 d-flex align-center justify-center dialog-content"
          >
            <p>
              {{ t("privacy_term_1") }}
              <v-dialog v-model="dialog" max-width="700" scrollable>
                <template v-slot:activator="{ props }">
                  <a
                    href="javascript:;"
                    color="primary"
                    v-bind="props"
                    class="ms-1"
                  >
                    {{ t("privacy_term_2") }}
                  </a>
                </template>

                <v-card class="terms-card">
                  <v-card-title>
                    <v-spacer></v-spacer>
                    <v-btn icon @click="dialog = false">
                      <v-icon icon="md:close"></v-icon>
                    </v-btn>
                  </v-card-title>
                  <v-card-text>
                    <h3 class="text-h5 text-center font-weight-bold mb-5">
                      使用者的守法義務
                    </h3>
                    您承諾絕不為任何非法目的或以任何非法方式使用本服務，並承諾遵守中華民國相關法規及一切使用網際網路之國際慣例。您若係中華民國以外之使用者，並同意遵守所屬國家或地域之法令。您同意並保證不得利用本服務從事侵害他人權益或違法之行為，包括但不限於：
                    <ul class="mb-3">
                      <li>
                        上載、張貼、公布或傳送任何誹謗、侮辱、具威脅性、攻擊性、不雅、猥褻、不實、違反公共秩序或善良風俗或其他不法之文字、圖片或任何形式的檔案於本服務上
                      </li>
                      <li>
                        侵害他人名譽、隱私權、營業秘密、商標權、著作權、專利權、其他智慧財產權及其他權利
                      </li>
                      <li>違反依法律或契約所應負之保密義務</li>
                      <li>冒用他人名義使用本服務</li>
                    </ul>
                    <v-divider></v-divider>
                    <h3 class="text-h5 text-center font-weight-bold mt-7 mb-5">
                      免責聲明
                    </h3>
                    您明確了解並同意：ChoozMo
                    對本服務不提供任何明示或默示的擔保，包含但不限於權利完整、商業適售性、特定目的之適用性及未侵害他人權利。本服務乃依其「現狀」及「提供使用時」之基礎提供，您使用本服務時，須自行承擔相關風險。ChoozMo
                    不保證以下事項：
                    <ul>
                      <li>本服務將符合您的需求</li>
                      <li>本服務不受干擾、及時提供、安全可靠或無錯誤</li>
                      <li>由本服務之使用而取得之結果為正確或可靠</li>
                    </ul>

                    是否經由本服務之使用下載或取得任何資料應由您自行考量且自負風險，並拋棄因前開任何資料之下載而導致您電腦系統、網路存取、下載或播放設備之任何損壞或資料流失，對
                    ChoozMo 提出任何請求或採取法律行動，您應自負完全責任。
                  </v-card-text>
                </v-card>
              </v-dialog>
            </p>
          </section>
        </v-form>
      </v-col>
    </v-row>
  </v-container>

  <!-- <v-container fluid class="d-flex fill-height">
    <v-row align="center" justify="center">
      <v-col :cols="width">
        <v-card class="elevation-12">
          <v-toolbar dark color="primary">
            <v-toolbar-title>{{ appName }}</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn to="/login">LogIn</v-btn>
          </v-toolbar>
          <v-card-text>
            <v-form @keyup.enter="submit">
              <v-text-field
                @keyup.enter="submit"
                v-model="email"
                prepend-icon="person"
                name="email"
                label="Email"
                type="text"
              ></v-text-field>
              <v-text-field
                @keyup.enter="submit"
                v-model="password"
                prepend-icon="key"
                name="password"
                label="Password"
                id="password"
                type="password"
              ></v-text-field>
            </v-form>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container> -->
</template>

<style lang="scss">
.dialog-content {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 1px;
  .v-btn {
    &:hover > .v-btn__overlay {
      opacity: 0;
    }
    &:hover > .v-btn__content {
      color: rgba(234, 84, 19, 0.8);
    }
  }
  .v-btn__content {
    font-size: 14px;
    font-weight: bold;
  }
}
.terms-card {
  margin: auto;
  font-size: 16px;
  ul {
    padding: 20px;
  }
  .v-card-title {
    display: flex;
    .v-btn {
      box-shadow: none;
    }
  }
  .v-card-text {
    padding: 0px 50px 50px !important;
  }
}
</style>
