<template>
  <Teleport to="body">
    <div class="picker-mask" @click.self="emit('close')">
      <div class="picker-panel">
        <div class="picker-title">
          {{ t("home.nav.please_select") }}
          <svg
            @click="emit('close')"
            style="cursor: pointer"
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M0.666016 9.74935C0.666016 4.59469 4.84469 0.416016 9.99935 0.416016C15.154 0.416016 19.3327 4.59469 19.3327 9.74935C19.3327 14.904 15.154 19.0827 9.99935 19.0827C4.84469 19.0827 0.666016 14.904 0.666016 9.74935Z"
              fill="#CCCCCC"
            />
            <path
              d="M12.833 5.84961C13.1273 5.55596 13.6042 5.55565 13.8965 5.84863C14.1907 6.14223 14.1893 6.61848 13.8965 6.91211L11.0615 9.74609L13.9043 12.5898C14.1973 12.8848 14.1986 13.3607 13.9043 13.6543C13.6114 13.947 13.1344 13.9471 12.8408 13.6543L9.99707 10.8105L7.1582 13.6504C6.86386 13.9444 6.38729 13.9446 6.09375 13.6504C5.8002 13.3574 5.80045 12.8809 6.09473 12.5859L8.93359 9.74707L6.10254 6.91602C5.80956 6.62236 5.80889 6.1452 6.10254 5.85156C6.39486 5.55817 6.87209 5.55802 7.16699 5.85156L9.99805 8.68262L12.833 5.84961Z"
              fill="white"
            />
          </svg>
        </div>

        <div class="language-list">
          <div
            v-for="opt in options"
            :key="opt.value"
            class="picker-item"
            :class="{ active: opt.value === localValue }"
            @click="localValue = opt.value"
          >
            {{ opt.label }}
          </div>
        </div>

        <div class="picker-actions">
          <button class="picker-confirm" @click="confirm">
            {{ t("home.nav.confirm_select") }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import { ref, watch, Teleport } from "vue";
import { useI18n } from "vue-i18n";

const props = defineProps({
  modelValue: { type: String, required: true },
  options: { type: Array, required: true },
});
const emit = defineEmits(["update:modelValue", "close", "confirm"]);
const { t } = useI18n();

const localValue = ref(props.modelValue);

watch(
  () => props.modelValue,
  (v) => {
    localValue.value = v;
  }
);

function confirm() {
  emit("update:modelValue", localValue.value);
  emit("confirm", localValue.value);
}
</script>

<style scoped lang="scss">
.picker-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.picker-panel {
  width: 100%;
  background: #fff;
  box-shadow: 0 3 * 5.12px 14 * 5.12px rgba(0, 0, 0, 0.16);
  padding: 16 * 5.12px;
  position: fixed;
  bottom: 0;
}
.picker-title {
  font-family: "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 14 * 5.12px;
  color: #455363;
  margin-bottom: 16 * 5.12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.language-list {
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
}
.picker-item {
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  color: #9da3ad;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44 * 5.12px;
  border-top: 1px solid #f2f2f2;
}
.picker-item:first-child {
  border-top: none;
}
.picker-item.active {
  color: #000;
  font-weight: 500;
}
.picker-actions {
  margin-top: 16 * 5.12px;
}
.picker-confirm {
  width: 100%;
  height: 44 * 5.12px;
  background: #ff7bac;
  color: #fff;
  border: none;
  border-radius: 8 * 5.12px;
  font-family: "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 14 * 5.12px;
}
</style>
