<template>
  <div class="button_question">
    <div class="mt-6 mb-4 d-flex">
      <span class="text-center fs-6 fw-bold w-100">{{
        questionText
      }}</span>
    </div>
    <div class="w-100 d-flex justify-content-center">
      <fieldset class="overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
        <legend class="sr-only">{{groupName}}</legend>
          <listButton v-for="answer in answers" :key="answer"
            :buttonID="answer"
            @mouseup="chooseAnswer(answer)"
            @keyup.space="chooseAnswer(answer)"
            loaderColor="blue"
            loaderPosition="right"
            sizeInRem="1.5"
            data-test="button"
            :groupName="groupName"
            textPosition="text-start"
            :isRequired="true"
            :value="modelValue"
            screenReaderOnlyText="(opens new window)"
          />
      </fieldset>
    </div>
  </div>
</template>

<script>
import listButton from "@/ux-components/list-button/list-button";
export default {
  name: "buttonQuestion",
  props: {
    questionText: String,
    answers: Array,
    modelValue: String,
    groupName: String
  },
  methods: {
    chooseAnswer(answer) {
      this.$emit("update:modelValue", answer);
    },
  },
  components: {
    listButton,
  },
};
</script>

<style lang="scss" scoped>
.button_question {
  height: calc(100vh - 280px);

  .overflow-scroll {
    // Height will be determined by overall height of content above list
    height: calc(100% - 320px);
    -webkit-overflow-scrolling: touch;
  }
}
</style>