<template>
  <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
    <div class="bubble poll-bubble">
      {{ pollQuestion }}
      <v-container fluid>
        <v-row
          v-for="answer in pollAnswers"
          :key="answer.id"
          @click="pollAnswer(answer.id)"
          :class="{ 'poll-answer': true, selected: answer.hasMyVote }"
        >
          <v-col cols="auto" class="ma-0 pa-0 poll-answer-title">{{ answer.text }}</v-col>
          <v-col
            v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin"
            cols="auto"
            class="ma-0 pa-0 poll-answer-num-votes"
            >{{ answer.numVotes }}</v-col
          >
          <div v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin" class="poll-percent-indicator">
            <div class="bar" :style="{ width: `${answer.percentage}%` }"></div>
          </div>
        </v-row>
        <v-row class="poll-status">
          <v-col cols="auto" class="ma-0 pa-0 poll-status-title">{{
            pollIsClosed
              ? $t("poll_create.poll_status_closed")
              : pollIsDisclosed
              ? userHasVoted
                ? $t("poll_create.poll_status_open")
                : $t("poll_create.poll_status_open_not_voted")
              : $t("poll_create.poll_status_disclosed")
          }}</v-col>
          <v-col
            cols="auto"
            class="ma-0 pa-0 poll-status-close clickable"
            v-if="!pollIsClosed && userCanClosePoll"
            @click.stop="pollClose"
            >{{ $t("poll_create.close_poll") }}</v-col
          >
        </v-row>
      </v-container>
    </div>
  </message-outgoing>
</template>

<script>
import pollMixin from "./pollMixin";
import MessageOutgoing from "./MessageOutgoing.vue";

export default {
  extends: MessageOutgoing,
  mixins: [pollMixin],
  components: { MessageOutgoing },
};
</script>

<style lang="scss">
@import "@/assets/css/chat.scss";
@import "@/assets/css/components/poll.scss";
</style>
