<script setup lang="ts">
import { usePollStore } from '~/stores/poll'
import { usePollOptionStore } from '~/stores/poll-option'
import type { Poll } from '~/server/models/poll'; 
const props = defineProps<{ dataId?: string }>();

const store = reactive({
  poll: usePollStore(),
  pollOptions: usePollOptionStore()
})

const poll = reactive<Poll>(await store.poll.fetchById((String(props.dataId))))
const options = ref<any []>(await store.pollOptions.fetchByPollId((String(props.dataId))))

const selectedOption = ref<any>(null);

function submitVote () {
  console.log(selectedOption, 'id')
}
</script>
<template>
    <span class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5]">
    <span class="block">
      <span class="underline decoration-gray-500 font-bold">
        {{ poll?.title }}
      </span>
      <!-- <button v-if="showResult && canShowResult" type="button" class="underline text-blue-400" @click="toggleResults">
        Câu hỏi
      </button>
      <button class="underline text-blue-400" v-if="!showResult && canShowResult" type="button" @click="toggleResults">
        Kết quả
      </button> -->
    </span>

    <span class="p-1 block">
          <span v-for="(option, index) in options" :key="index" class="block">
            <label class="flex gap-2 m-2">
              <input type="radio" :value="option.id" v-model="selectedOption" />
              <span class="font-semibold">{{ option?.title }}</span>
            </label>
          </span>
        <button @click="submitVote" class="bg-primary-500 text-white py-1 px-3 rounded-4px cursor-pointer hover:bg-primary-600 float-right">Bình chọn </button>
    </span>

    <!-- <span v-else class="block">
        <span v-for="(answer, index) in options" :key="index" class="block poll-result relative rounded-3xl overflow-hidden my-3">
          <span class="absolute top-0 start-0 bottom-0 bg-gradient-to-r from-sky-500 to-indigo-500"
            :style="{ width: `${calculatePercentage(answer?.voteCount)}%` }"></span>
          <span class="block relative z-0 ps-1">
            <span>{{ calculatePercentage(answer?.voteCount).toFixed(2) }}%</span>
            <span class="">({{ answer?.voteCount }})</span>
          </span>
        </span>
    </span> -->
  </span>
</template>