import Timeago from 'components/timeago/timeago.vue'
import genRandomSeed from '../../services/random_seed/random_seed.service.js'
import RichContent from 'components/rich_content/rich_content.jsx'
import Checkbox from 'components/checkbox/checkbox.vue'
import { usePollsStore } from 'src/stores/polls'

export default {
  name: 'Poll',
  props: ['basePoll', 'emoji'],
  components: {
    Timeago,
    RichContent,
    Checkbox
  },
  data () {
    return {
      loading: false,
      choices: [],
      randomSeed: genRandomSeed()
    }
  },
  created () {
    if (!usePollsStore().pollsObject[this.pollId]) {
      usePollsStore().mergeOrAddPoll(this.basePoll)
    }
    usePollsStore().trackPoll(this.pollId)
  },
  unmounted () {
    usePollsStore().untrackPoll(this.pollId)
  },
  computed: {
    pollId () {
      return this.basePoll.id
    },
    poll () {
      const storePoll = usePollsStore().pollsObject[this.pollId]
      return storePoll || {}
    },
    options () {
      return (this.poll && this.poll.options) || []
    },
    expiresAt () {
      return (this.poll && this.poll.expires_at) || null
    },
    expired () {
      return (this.poll && this.poll.expired) || false
    },
    expirationLabel () {
      if (this.$store.getters.mergedConfig.useAbsoluteTimeFormat) {
        return this.expired ? 'polls.expired_at' : 'polls.expires_at'
      } else {
        return this.expired ? 'polls.expired' : 'polls.expires_in'
      }
    },
    loggedIn () {
      return this.$store.state.users.currentUser
    },
    showResults () {
      return this.poll.voted || this.expired || !this.loggedIn
    },
    totalVotesCount () {
      return this.poll.votes_count
    },
    containerClass () {
      return {
        loading: this.loading
      }
    },
    choiceIndices () {
      // Convert array of booleans into an array of indices of the
      // items that were 'true', so [true, false, false, true] becomes
      // [0, 3].
      return this.choices
        .map((entry, index) => entry && index)
        .filter(value => typeof value === 'number')
    },
    isDisabled () {
      const noChoice = this.choiceIndices.length === 0
      return this.loading || noChoice
    }
  },
  methods: {
    percentageForOption (count) {
      return this.totalVotesCount === 0 ? 0 : Math.round(count / this.totalVotesCount * 100)
    },
    resultTitle (option) {
      return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
    },
    activateOption (index, value) {
      let result
      if (this.poll.multiple) {
        result = this.choices || this.options.map(() => false)
      } else {
        result = this.options.map(() => false)
      }
      result[index] = value
      this.choices = result
    },
    optionId (index) {
      return `poll${this.poll.id}-${index}`
    },
    vote () {
      if (this.choiceIndices.length === 0) return
      this.loading = true
      usePollsStore().votePoll(
        { id: this.statusId, pollId: this.poll.id, choices: this.choiceIndices }
      ).then(() => {
        this.loading = false
      })
    }
  }
}