<script setup>
import { ref } from "vue";
import { Splide, SplideSlide } from "@splidejs/vue-splide";
import "@splidejs/splide/dist/css/splide.min.css";

const props = defineProps({
  question: {
    type: Object,
    required: true,
  },
});
const emits = defineEmits(["answerSelected", "nextQuestion"]);

const slides = ref();

const answerWeight = ref(props.question.weight);

function selectAnswer(answer) {
  const answerIndex = props.question.answers.findIndex(
    (a) => a.id === answer.id
  );
  slides.value.splide.go(answerIndex);
}

function slideMove(splide, newIndex) {
  answerWeight.value = props.question.answers[newIndex].weight;
  emits("answerSelected", props.question, answerWeight);
}
const displayPopup = ref(false);
function showHidePopup() {
  displayPopup.value = !displayPopup.value;
}
function validatePopup() {
  const calcule = Math.round((h.value * 100) / d.value);
  const regexp = /[^0-9]*([0-9]{2})/g;
  const answersLength = props.question.answers.length;
  const answerIndex = props.question.answers.find((answer, index) => {
    const values = Array.from(answer.title.matchAll(regexp), (m) => m[1]);
    if (values.length > 0) {
      const min = values.length == 1 ? 0 : values[0];
      const max = values.length == 1 ? values[0] : values[1];
      if (calcule >= min && calcule <= max) {
        return true;
      }
    }
    if (answersLength == index + 1) {
      return true;
    }
  });
  document.querySelector(
    "input[id=" + `question_${props.question.id}_answer_${answerIndex.id}` + "]"
  ).checked = true;
  showHidePopup();
}
const h = ref(1);
const d = ref(1);
</script>

<template>
  <div class="main">
    <div class="center">
      <legend>{{ question.title }}</legend>

      <div class="images">
        <template v-if="question.answers">
          <Splide
            @splide:move="slideMove"
            class="answers"
            :id="`question_${question.id}`"
            ref="slides"
          >
            <SplideSlide v-for="answer in question.answers" :key="answer.id">
              <img height="200" :src="`/answers/${answer.image}.webp`" />
            </SplideSlide>
          </Splide>
        </template>
      </div>

      <template v-if="question.answers">
        <ul class="choices">
          <li
            class="choice"
            v-for="answer in question.answers"
            :key="answer.id"
          >
            <input
              type="radio"
              :data-answerId="answer.id"
              :name="`question_${question.id}`"
              :id="`question_${question.id}_answer_${answer.id}`"
              :value="answer.weight"
              v-model="answerWeight"
              @change="selectAnswer(answer)"
              @click="nextQuestion"
            />
            <label :for="`question_${question.id}_answer_${answer.id}`">
              {{ answer.title }}
            </label>
          </li>
        </ul>
      </template>
    </div>
  </div>
  <div class="btns">
    <template v-if="question.function == 'rapport_hd'">
      <button class="btn calculette" @click="showHidePopup">
        <img src="/abacus.svg" alt="" />
      </button>
    </template>
    <button class="btn next" @click="$emit('nextQuestion')">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 40 40"
        width="40"
        height="40"
      >
        <path
          d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"
        ></path>
      </svg>
    </button>
  </div>
  <template v-if="displayPopup">
    <div class="popup">
      <button class="btn close" @click="showHidePopup">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
          <path
            d="M21.529 18.006l8.238-8.238c.977-.976.977-2.559 0-3.535-.977-.977-2.559-.977-3.535 0l-8.238 8.238-8.238-8.238c-.976-.977-2.56-.977-3.535 0-.977.976-.977 2.559 0 3.535l8.238 8.238-8.258 8.258c-.977.977-.977 2.559 0 3.535.488.488 1.128.732 1.768.732s1.28-.244 1.768-.732l8.258-8.259 8.238 8.238c.488.488 1.128.732 1.768.732s1.279-.244 1.768-.732c.977-.977.977-2.559 0-3.535l-8.24-8.237z"
            fill="#000"
          />
        </svg>
      </button>
      <label for="H">H (m)</label>
      <input v-model="h" type="number" name="H" />
      <label for="D">D (cm)</label>
      <input v-model="d" type="number" name="D" />
      <p>({{ h }} * 100) / {{ d }} ≃ {{ Math.round((h * 100) / d) }}</p>
      <button class="btn equal" @click="validatePopup">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
          <path
            fill="#31373D"
            d="M34.459 1.375c-1.391-.902-3.248-.506-4.149.884L13.5 28.17l-8.198-7.58c-1.217-1.125-3.114-1.051-4.239.166-1.125 1.216-1.051 3.115.166 4.239l10.764 9.952s.309.266.452.359c.504.328 1.07.484 1.63.484.982 0 1.945-.482 2.52-1.368L35.343 5.524c.902-1.39.506-3.248-.884-4.149z"
          />
        </svg>
      </button>
    </div>
  </template>
</template>

<style lang="sass">
.btns
  width: 400px
  max-width: 100%
  min-width: 280px
  position: relative
  margin: 0 auto

.popup
  position: absolute
  background: var(--color-highlight-background)
  color: var(--color-highlight-text)
  top: 0
  left: 0
  right: 0
  bottom: 0
  z-index: 100
  display: flex
  flex-direction: column
  padding: 1rem
  justify-content: center
  align-items: center

  p
    padding: 1rem
    margin: 1rem
    border: 1px solid var(--color-highlight-text)

  svg path
    fill: var(--color-highlight-background)
  .close
    top: 1rem
    right: 1rem


  .equal
    position: relative

  input
    padding: .4rem
    text-align: center
    font-size: 1rem
    width: 5rem

.calculette
  background: var(--color-highlight-background)
  bottom: 1rem
  left: 1rem
  width: 3rem
  height: 3rem

  img
    width: 80%
    height: 80%

.next
  background: var(--color-highlight-background)
  bottom: 1rem
  right: 1rem
  width: 3rem
  height: 3rem
  opacity: .8

  &:hover
    opacity: 1

  svg
    width: 80%
    height: 80%
    transform: rotate(90deg)
    fill: var(--color-highlight-text)

.splide__arrow
  background: transparent
  border: 3px solid var(--color-green)
  width: 3rem
  height: 3rem
  opacity: 1

  svg
    fill: var(--color-green)
    height: 1.6rem
    width: 1.6rem
.splide__pagination
  bottom: -1.5em
  display: none
.splide__pagination__page
  width: .7rem
  height: .7rem
  background: var(--color-green)

  &.is-active
    background: var(--color-green)
</style>

<style lang="sass" scoped>

legend
  text-align: center
  font-size: 1.4rem
  line-height: 2rem
  font-weight: bold

.choices
  list-style-type: none
  text-align: left
  display: inline-block
  padding-left: 0

  label
    cursor: pointer

  input[type=radio]
    display: none

    & + label
      position: relative
      padding: .2rem .2rem .2rem 2rem
    & + label::before,
    & + label::after
      display: block
      position: absolute
      box-sizing: border-box
      content:''
      border-radius: 1rem
    & + label::before
      bottom: .3rem
      left: 0
      background-color: var(--color-green)
      width: 1rem
      height: 1rem
    & + label::after
      bottom: calc(3px + .3rem)
      left: 3px
      width: calc(1rem - 6px)
      height: calc(1rem - 6px)
    &:checked + label
      text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor
    &:checked + label::before
      background-color: var(--color-green)
    &:checked + label::after
      background-color: white

.main
  height: 100%
  max-width: 100%
  display: flex
  flex-direction: column
  justify-content: space-around
  align-items: center

  .center
    width: 100%
    text-align: center

  .images
    margin: 3rem auto
    width: 400px
    max-width: 100%
    min-width: 280px

    @media (max-height: 600px)
      margin: 1rem auto

  h2
    font-size: 2rem

.answers
  text-align: center

@media only screen and (orientation : landscape)
  .main
    flex-direction: row

    .images
      max-width: 50%
</style>
