<template lang="pug" xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
  div(style='min-height: 95vh')
    loader(v-if='!season[1].items')
    v-container(fluid, v-else, style='padding: 20px 0 0')
      v-layout.form-container(row, wrap, justify-center)
        v-flex.season-container(sm3, xs8)
          v-select(
            :items='seasonChoices',
            v-model='$store.state.seasons.season',
            label='Season',
            dark, item-text='name',
            item-value='value'
          )
        v-flex.year-container(offset-sm1, sm3, xs8)
          v-text-field(name='input-year', type='number', min='2010', label='Year', v-model='$store.state.seasons.year', dark)
        v-flex.refresh-button(offset-sm1, sm2, xs8)
          v-btn(secondary, block, dark, @click='refreshSeason()') Refresh
      v-tabs#tabs(dark, fixed, centered)
        v-tabs-bar.mablue
          v-tabs-slider.primary
          v-tabs-item(v-for='i in 3', :href="'#' + i", :key='i')
            | {{ season[i].name }}
        v-tabs-items
          v-tabs-content(v-for='i in 3', lazy, :id='`${i}`', :key='i')
            v-text-field.query(v-model='query', label='Search entry', dark)
            v-layout.elems(row, wrap)
              transition-group(name='list')
                v-flex.pa-1(
                  xl3, lg4, md6, xs12,
                  v-for='item in computedSeason[i].items',
                  style='display: inline-block',
                  :key='item.key'
                )
                  v-layout.elem.elevation-3(row, wrap, v-ripple='true')
                    // Header of elem
                    v-flex(xs12, v-tooltip:bottom='{ html: item.title }')
                      h6.title.ellipsis.white--text
                        | {{ item.title }}
                    v-flex(xs8, v-tooltip:bottom="{ html: item.genres.join(' ') }")
                      p.genres.ellipsis {{ item.genres.join(' ') }}
                    v-flex(xs3, v-tooltip:bottom='{ html: item.fromType }')
                      p.from-type.ellipsis
                        | {{ item.fromType }}
                    v-flex(xs1)
                    // Picture of elem
                    v-flex.image-container(xs3, lg4)
                      lazy-component
                        img.image(:src='item.picture', onerror="this.src='static/images/error.jpg'")
                    v-flex.bottom-right(xs9, lg8)
                      v-layout(wrap, justify-space-between, align-center)
                        v-flex(xs12)
                          .synopsis {{ reduced(item.synopsis) }}
                        v-flex.pl-2(xs12)
                          v-layout(wrap, justify-space-between)
                            v-flex.date(xs6) {{ getDate(item.releaseDate) }}
                            v-flex.nb-ep(xs6) {{ episode(item) }}
                          v-layout(wrap, justify-space-between)
                            v-flex.producers(xs8)
                              strong {{ item.producers.join(' ') }}
                            v-flex.pb-1(xs4)
                              v-menu(open-on-hover, transition='slide-x-transition')
                                v-btn(flat, dark, slot='activator') More
                                v-list.dark
                                  v-list-tile(@click='openModal(item.title, item.synopsis)')
                                    v-list-tile-action
                                      v-icon more
                                    v-list-tile-title Check synopsis
                                  v-list-tile(@click="$store.dispatch('search/fromName', item.title)")
                                    v-list-tile-action
                                      v-icon info_outline
                                    v-list-tile-title Information
                                  v-list-tile(@click='showChoices(item.title)')
                                    v-list-tile-action
                                      v-icon add_box
                                    v-list-tile-title Add to
      .text-xs-center.modal-container
        v-dialog(v-model='modal', width='70%')
          v-card.secondary.white--text
            v-card-text.white--text
              h2.headline.white--text {{ modalTitle }}
            v-card-text.text.white--text
              | {{ modalText }}
            v-card-actions
              v-spacer
              v-btn.blue--text.darken-1(flat, style='width: 100px', v-on:click.native='modal = false')
                | Thanks!
      choice-window(:entry='choiceTitle')
</template>

<script>
  export default {
    data () {
      return {
        query: '',
        choiceTitle: '',
        choices: [],
        modalTitle: '',
        modalText: '',
        modal: false,
        seasonChoices: [
          {name: 'Winter', value: 'winter'},
          {name: 'Spring', value: 'spring'},
          {name: 'Summer', value: 'summer'},
          {name: 'Fall', value: 'fall'}
        ]
      }
    },
    computed: {
      seasons () {
        return this.$store.state.seasons.seasons
      },
      stats () {
        return this.$store.state.seasons.seasonsStats
      },
      TVs () {
        return this.seasons.TV
      },
      OVAs () {
        return this.seasons.OVAs
      },
      Movies () {
        return this.seasons.Movies
      },
      season () {
        return [
          '',
          {name: 'TV', items: this.TVs},
          {name: 'OVA', items: this.OVAs},
          {name: 'Movies', items: this.Movies}
        ]
      },
      computedSeason () {
        const query = this.query.toLowerCase()
        return query === ''
          ? this.season
          : this.season.map((list) => {
            if (list.items) {
              return {
                name: list.name,
                items: list.items.filter((elem) => {
                  return elem.title.toLowerCase().indexOf(query) !== -1
                })
              }
            } else return ''
          })
      }
    },
    methods: {
      reduced (text) {
        return text.length > 270
          ? text.slice(0, 300) + '...'
          : text
      },
      getDate (string) {
        return string.split(' ').slice(0, 3).join(' ')
      },
      episode (item) {
        const nbEp = parseInt(item.nbEp)
        if (nbEp > 0) {
          if (nbEp === 1) return '1 episode'
          else return `${nbEp} episodes`
        } else return ''
      },
      refreshSeason () {
        this.$store.dispatch('seasons/refresh')
      },
      openModal (title, text) {
        console.log(`[${(new Date()).toLocaleTimeString()}]Opening modal for ${title}`)

        this.modalTitle = title
        this.modalText = text

        this.modal = true
      },
      showChoices (name) {
        this.choiceTitle = name
        this.$store.commit('setAddToChoice', true)
      }
    }
  }
</script>

<style scoped>
  h6
  {
    margin: 0;
  }

  div.input-group
  {
    padding-bottom: 5px !important;
    margin-top: 8px !important;
  }

  .text
  {
    text-align: justify;
    text-align-last: center;
    padding: 20px;
    font-size: 16px;
  }


  .refresh-button
  {
    display: flex;
    align-items: center;
  }

  .query
  {
    margin: 30px 0 0;
    margin-left: 10%;
    width: 25%;
  }

  /* ----------- ELEM ---------- */
  .ellipsis
  {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .elems
  {
    padding: 0 1% 2% 1%;
  }

  .elem
  {
    position: relative;
    background-color: rgb(60, 60, 60);
  }

  .elem:hover
  {
    transition: all 0.25s;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
  }

  .title
  {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 26px;
  }

  .from-type
  {
    margin-bottom: 5px;
    text-align: right;
    font-weight: 700;
    font-size: 120%;
  }

  .genres
  {
    padding-left: 10px;
    font-weight: 600;
  }

  .image-container
  {
    padding: 0;
    height: 210px;
  }

  .image
  {
    height: 210px;
    max-width: 90%;
  }

  .bottom-right
  {
    position: relative;
    display: flex;
  }

  .synopsis
  {
    padding-left: 5px;
    padding-right: 15px;
    text-align: justify;
    display: block;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    height: 7.5em;
    line-height: 1.5em;
  }

  .date
  {
    margin-top: 5%;
  }

  .nb-ep
  {
    text-align: right;
    margin-top: 5%;
    padding-right: 20px;
  }

  .producers
  {
    margin-top: 4%;
  }
</style>
