<script setup>
import { ref, reactive, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import "animate.css";
import Marquee from "../components/Marquee.vue";

const { t, locale } = useI18n();
const langList = reactive([
  {
    lang: "中文",
    value: "zh-tw",
  },
  {
    lang: "English",
    value: "en-us",
  },
  {
    lang: "日本語",
    value: "ja-jp",
  },
  {
    lang: "한국어",
    value: "ko-kr",
  },
]);

let isLanguagePage = ref(true);

function chooseLang(lang) {
  isLanguagePage.value = false;
  console.log("選擇語言：", lang);
  locale.value = lang; // i18n locale
  localStorage.setItem("lang", lang);
}

// onMounted(() => {
//   let lang = route.params.lang;

//   if (lang && lang !== "") {
//     chooseLang(lang);
//   } else {
//     let localStorageLang = localStorage.getItem("lang");
//     chooseLang(localStorageLang);
//   }
// });
</script>

<template>
  <div v-if="isLanguagePage" class="lang-content">
    <div style="position: relative">
      <section class="postcard-title">
        <h3>歡迎來到 AI 明信片</h3>
        <p>請選擇您的語言</p>

        <div class="btn-content">
          <button
            v-for="(item, index) in langList"
            :key="index"
            @click="chooseLang(item.value)"
            class="main-btn"
          >
            {{ item.lang }}
          </button>
        </div>
      </section>

      <Marquee />
    </div>
  </div>

  <div v-else class="content">
    <section class="px-3 mb-10">
      <p>
        {{ t("postcard.step1.text_1") }} <br />
        {{ t("postcard.step1.text_2") }} <br />
        {{ t("postcard.step1.text_3") }}
      </p>
      <p>
        {{ t("postcard.step1.text_4") }} <br />
        {{ t("postcard.step1.text_5") }}
      </p>
    </section>

    <Marquee />

    <router-link to="/step2" class="main-btn">
      {{ t("next_step") }}
    </router-link>

    <div class="hashtag">
      <span># {{ t("postcard.step1.text_6") }}</span>
      <span># {{ t("postcard.step1.text_7") }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
p {
  font-size: 1.25rem;

  @media (max-width: 600px) {
    font-size: 1rem;
  }
}

span {
  font-size: 1.25rem;

  @media (max-width: 600px) {
    font-size: 1rem;
  }
}

.content {
  min-height: 100vh;
  padding: 4rem 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;

  p {
    position: relative;
    z-index: 100;

    &:first-child {
      margin-bottom: 1.625rem;
    }
  }

  .main-btn {
    margin: 3rem auto;
    position: relative;
    z-index: 100;
  }

  .hashtag {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;

    span {
      color: white;
      &:last-child {
        margin-left: 20px;
      }
    }
  }

  #marquee {
    position: relative;
  }
}

.lang-content {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  // background-color: #231816;
  background-size: cover;
  background-position: center center;
  background-image: url("@/assets/img/background.webp");
  background-blend-mode: multiply;

  .postcard-title {
    color: white;
  }

  h3 {
    font-size: 2rem;
    margin-bottom: 1rem;

    @media (max-width: 600px) {
      font-size: 1.6rem;
    }
  }

  p {
    font-size: 1.625rem;

    @media (max-width: 600px) {
      font-size: 1.5rem;
    }
  }

  h3,
  p {
    position: relative;
    z-index: 1000;
  }

  .main-btn {
    margin: 0 auto 2.5rem;

    &:last-child {
      margin: auto;
    }
  }

  .btn-content {
    margin-top: 2rem;
    position: relative;
    z-index: 100;
  }

  #marquee {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }
}
</style>
