<template>
  <div>
    <heading
      :ts="formBody.sharedStyle.heading"
      :ls="widget.style.heading"
      :d="widget.style.heading.defaultStyle"
      >{{ widget.text.heading }}
    </heading>
    <heading
      :ts="formBody.sharedStyle.subHeading"
      :ls="widget.style.subHeading"
      :d="widget.style.subHeading.defaultStyle"
      >{{ widget.text.subHeading }}
    </heading>
    <v-container>
      <v-row justify="center">
        <div class="button-wrapper" style="color: green">
          <button
            @click="sendboolean(widget.text.option[true], 1)"
            :class="{ 'green-button': trueActive }"
          >
            <v-icon :color="trueActive ? 'white' : 'green'" x-large
              >mdi-thumb-up-outline</v-icon
            >
          </button>
        </div>

        <div class="button-wrapper" style="color: red">
          <button
            @click="sendboolean(widget.text.option[false], 0)"
            :class="{ 'red-button': falseActive }"
          >
            <v-icon :color="falseActive ? 'white' : 'red'" x-large
              >mdi-thumb-down-outline</v-icon
            >
          </button>
        </div>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import Heading from "@/components/widgets/components/heading";
export default {
  name: "BooleanComponent",
  components: { Heading },
  data: function () {
    return {
      trueActive: false,
      falseActive: false,
      hover: false,
      highlight: false,
      top: false,
      bottom: false,
    };
  },
  props: {
    widget: Object,
    formBody: Object,
  },
  methods: {
    sendboolean(value, id) {
      if (id == 1) {
        this.trueActive = true;
        this.falseActive = false;
        this.widget.value.response.id = id;
        this.widget.value.response.value = value;
      } else if (id == 0) {
        this.trueActive = false;
        this.falseActive = true;
        this.widget.value.response.id = id;
        this.widget.value.response.value = value;
      }
    },
  },
};
</script>

<style scoped>
button {
  border: solid 4px;
  border-radius: 100%;
  margin: 0 auto;
  width: 70%;
  aspect-ratio: 1 / 1;
}

.green-button {
  background-color: green;
}

.red-button {
  background-color: red;
}

.button-wrapper {
  display: inline-block;
  margin: 20px 10px;
  box-sizing: border-box;
  width: 30%;
  text-align: center;
}
</style>
