<template>
  <q-list bordered>
    <q-item class="row" style="background-color: #f8f8fc;">
      <q-item-section style="display: flex; flex-basis: 50%;">
        <q-item-label class="text-h6">
          <!--q-btn flat round color="primary" icon="arrow_left" /-->{{title}}
        </q-item-label>
      </q-item-section>
      <q-item-section v-if="topicsMode" style="display: flex; flex-basis: 50%;" side top>
        <q-expansion-item
        v-model="infoExpanded"
        expand-separator
        label="Информация"
        header-class="primary"
        >
        </q-expansion-item>
      </q-item-section>
    </q-item>
    <q-item v-if="infoExpanded" style="background-color: #f8f8fc;">
      {{description}}
    </q-item>

    <q-separator />
    <q-item @click="moveTo()" clickable v-ripple v-for="item in pages[pageN]" :key="item.name">
      <q-item-section center avatar>
        <q-icon :size="'xs'" :name="item.icon" color="primary"/>
      </q-item-section>

      <q-item-section>
        <q-item-label>{{item.name}}</q-item-label>
      </q-item-section>

      <q-item-section class="q-mt-sm" side top>
        <q-badge v-if="topicsMode" class="q-mb-sm">
          {{item.nMessages}}
          <q-tooltip content-class="bg-indigo" :offset="[10, 10]">
            Сообщения
          </q-tooltip>
        </q-badge>
        <q-badge v-else class="q-mb-sm">
          {{item.nTopics}}
          <q-tooltip content-class="bg-indigo" :offset="[10, 10]">
            Темы
          </q-tooltip>
        </q-badge>
        <!--q-badge v-if="!topicsMode" :label="'Темы: ' + item.nTopics" /-->
      </q-item-section>
      <q-item-section v-if="item.lastMessage" class="q-ml-md" style="max-width: 300px; min-width: 300px" top>
        Последнее сообщение: <br>
        от {{item.lastMessage.from}}, {{item.lastMessage.time}} <br>
        <p v-if="!topicsMode"> тема: "{{item.lastMessage.topic}}" </p>
      </q-item-section>
    </q-item>
    <q-separator />
    <q-item>
      <q-btn v-if="pageN != 0" @click="pageN = 0" flat color="primary" label="<<" />
      <q-btn v-if="pageN != 0" @click="pageN--" flat color="primary" label="<" />
      <q-btn v-if="pageN != 0" @click="pageN--" flat color="primary" :label="pageN" />
      <q-btn outline color="primary" :label="pageN + 1" />
      <q-btn v-if="pageN + 1 != pages.length" @click="pageN++" flat color="primary" :label="pageN + 2" />
      <q-btn v-if="pageN + 1 != pages.length" @click="pageN++" flat color="primary" label=">" />
      <q-btn v-if="pageN + 1 != pages.length" @click="pageN = pages.length - 1" flat color="primary" label=">>" />
    </q-item>
  </q-list>
</template>
<script>
export default {
  name: 'ForumSelection',
  data () {
    return ({
      pages: [],
      pageN: 0,
      infoExpanded: false
    })
  },
  props: {
    title: {
      type: String,
      required: true
    },

    description: {
      type: String,
      default: ''
    },

    subSection: {
      type: Array,
      default: () => []
    },

    items: {
      type: Array,
      default: () => []
    },
    topicsMode: {
      type: Boolean,
      default: false
    },
    maxPerPage: {
      type: Number
    }
  },
  beforeMount () {
    const self = this
    let page = []
    this.items.forEach((el) => {
      page.push(el)
      if (page.length === self.maxPerPage) {
        self.pages.push(page)
        page = []
      }
    })
    if (page.length !== 0) {
      self.pages.push(page)
    }
  },
  methods: {
    moveTo () {
      if (this.topicsMode) {
        this.$router.push({ path: '/topic/1' })
      } else {
        this.$router.push({ path: '/topics/1' })
      }
    }
  }
}
</script>
