<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import "animate.css";
import Footer from "../components/Footer.vue";

const { t } = useI18n();
const router = useRouter();
const store = useMainStore();

// let assignGender = ref("");

let genderList = reactive([
  {
    value: "male",
    icon: "mdi-gender-male",
  },
  {
    value: "female",
    icon: "mdi-gender-female",
  },
]);

function setGender(value) {
  store.assignGender = value;
}

let alertShow = ref(false);

function check() {
  if (store.assignGender === "") {
    // alert("尚未選擇性別");
    alertShow.value = true;
    setTimeout(() => {
      alertShow.value = false;
    }, 2000);
  } else {
    alertShow.value = false;
    router.push("/step3");
  }
}
</script>

<template>
  <div class="content">
    <div class="gender-btn">
      <p class="mb-10">{{ t("select_gender") }}</p>

      <button
        v-for="item in genderList"
        @click="setGender(item.value)"
        :class="{ assign: store.assignGender === item.value }"
      >
        <v-icon :icon="item.icon" color="white"></v-icon>
        <p>{{ t(item.value) }}</p>
      </button>

      <div v-if="alertShow" class="alert-item">
        <v-alert border="top" type="warning" variant="outlined" class="mt-5">
          尚未選擇
        </v-alert>
      </div>
    </div>

    <button @click="check()" to="/step3" class="main-btn">
      {{ t("next_step") }}
    </button>

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

    <Footer url="/step1" />
  </div>
</template>

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

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

span {
  font-size: 1rem;

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

.gender-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;

  button {
    display: flex;
    width: 13rem;
    padding: 0.8rem;
    margin-bottom: 2rem;
    border-radius: 100px;
    border: 3px solid transparent;
    background-image: url("../assets/img/button-2.png");
    background-position: center;
    background-size: cover;
    // background-color: var(--main-color);

    .v-icon {
      position: absolute;
    }

    p {
      margin: auto;
    }

    &.assign {
      border: 3px solid white;
      // background-color: #ae774f;
    }
  }
}

.content {
  height: 100vh;
  display: flex;
  flex-direction: column;

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

  .main-btn {
    margin: auto auto 0;
  }

  .hashtag {
    display: flex;
    justify-content: center;

    span {
      color: white;
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
