<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 class="pa-6 mt-10">
      <v-row>
        <v-slider
          v-model="slider"
          :thumb-size="40"
          thumb-label="always"
          :tick-labels="ticksLabels"
          color="grey"
          track-color="grey"
          step="10"
          ticks="always"
          tick-size="4"
          :thumb-color="
            widget.style.heading.defaultStyle
              ? formBody.sharedStyle.heading.textColor
              : widget.style.heading.textColor
          "
        >
          <template v-slot:thumb-label="{ value }">
            <span style="font-size: 30px">
              {{ satisfactionEmojis[Math.min(Math.floor(value / 10), 9)] }}
            </span>
          </template>
        </v-slider>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import Heading from "@/components/widgets/components/heading";
export default {
  name: "SmileyFaceSliderWidget",
  components: { Heading },
  props: {
    widget: Object,
    formBody: Object,
  },
  data() {
    return {
      satisfactionEmojis: [
        "😭",
        "😢",
        "☹️",
        "🙁",
        "😐",
        "🙂",
        "😊",
        "😁",
        "😄",
        "😍",
      ],
      ticksLabels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
      slider: 45,
    };
  },
};
</script>
