<template>
  <QuestionSummary :title="props.title" :text="props.text">
    <h5 class="mb-6 text-base">{{ answers }} {{ $t("feedback.answers") }}</h5>
    <div
      class="grid grid-cols-horizontal-bar-chart-slim grid-rows-horizontal-bar-chart overflow-hidden pt-[10px] grid-areas-horizontal-bar-chart md:grid-cols-horizontal-bar-chart"
    >
      <div class="-mt-[10px] flex flex-col justify-between pb-[30px] grid-in-y-axis">
        <span
          v-for="percentage in [100, 75, 50, 25, 0]"
          :key="percentage"
          class="text-sm"
        >
          {{ percentage }}%
        </span>
      </div>
      <div
        class="background relative col-span-5 col-start-2 row-start-1 h-1/2 w-full self-center border-y border-y-gray-400 before:absolute before:top-1/2 before:w-full before:border-t before:border-t-gray-400"
      ></div>
      <div
        class="relative col-span-5 col-start-2 row-start-1 flex h-[200px] w-full content-center items-end justify-around border-y border-gray-400 border-y-gray-400"
      ></div>
      <div
        class="relative self-end bg-red-500 grid-in-left-chart"
        :style="redStyle"
      ></div>
      <div
        class="relative self-end bg-green-500 grid-in-right-chart"
        :style="greenStyle"
      ></div>
      <div class="self-center justify-self-center font-bold grid-in-left-label">
        <Popover class="relative">
          <PopoverButton class="focus:outline-none">
            {{ $t("general.no") }}
          </PopoverButton>
          <PopoverPanel
            class="absolute top-[-200%] z-10 w-[120px] border border-gray-500 bg-white p-1 text-left text-sm font-normal"
          >
            <p>
              {{
                `"${$t("general.no")}" ${numberOfRatings["no"]} ${$t(
                  "feedback.answers"
                )}`
              }}
            </p>
          </PopoverPanel>
        </Popover>
      </div>
      <div class="self-center justify-self-center font-bold grid-in-right-label">
        <Popover class="relative">
          <PopoverButton class="focus:outline-none">
            {{ $t("general.yes") }}
          </PopoverButton>
          <PopoverPanel
            class="absolute top-[-200%] z-10 w-[120px] border border-gray-500 bg-white p-1 text-left text-sm font-normal"
          >
            <p>
              {{
                `"${$t("general.yes")}" ${numberOfRatings["yes"]} ${$t(
                  "feedback.answers"
                )}`
              }}
            </p>
          </PopoverPanel>
        </Popover>
      </div>
    </div>
  </QuestionSummary>
</template>

<script setup lang="ts">
import QuestionSummary from "@/components/ui/QuestionSummary.vue";
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
import { computed } from "vue";
const props = defineProps<{
  ratings: boolean[];
  title: string;
  text: string;
}>();

const positiveAnswers = computed(() => props.ratings.filter((rating) => rating));
const negtiveAnswers = computed(() => props.ratings.filter((rating) => !rating));

const ratio = computed(() => {
  const ratio =
    positiveAnswers.value.length /
    (positiveAnswers.value.length + negtiveAnswers.value.length);
  return Math.min(ratio, 1);
});

const redHeight = computed(() => {
  return 1 - ratio.value;
});

const answers = computed(() => {
  return props.ratings.length;
});

const numberOfRatings = computed(() => {
  return {
    yes: positiveAnswers.value.length,
    no: negtiveAnswers.value.length,
  };
});

const redStyle = {
  height: `${100 * redHeight.value}%`,
};

const greenStyle = {
  height: `${100 * ratio.value}%`,
};
</script>
