<template xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
  <v-container fluid>
    <loader v-if="!season[1].items"></loader>

    <v-container fluid v-else>
      <v-row class="form-container">
        <v-col md1 xs0></v-col>
        <v-col md3 xs12 class="season-container">
          <v-select
              v-bind:items="seasonChoices"
              v-model="$store.state.season"
              label="Season"
              dark
              item-text="name"
              item-value="value"/>
        </v-col>
        <v-col md3 xs12 class="year-container">
          <v-text-field name="input-year"
                        type="number" min="2010"
                        label="Year"
                        v-model="$store.state.year"
                        dark>
          </v-text-field>
        </v-col>
        <v-col md4 xs12 class="refresh-button">
          <v-btn secondary block dark @click.native="refreshSeason()">Refresh</v-btn>
        </v-col>
        <v-col md1 xs0></v-col>
      </v-row>

      <v-tabs id="tabs" grow>
        <v-tab-item v-for="i in 3"
                    :href="'#' + i"
                    :key="i"
                    slot="activators">
          {{ season[i].name }}
        </v-tab-item>
        <v-tab-content v-for="i in 3"
                       v-bind:id="`${i}`"
                       :key="i"
                       slot="content">
          <v-card>
            <v-text-field class="query"
                          v-model="query"
                          label="Search entry" dark>
            </v-text-field>
            <v-row class="elems">
              <transition-group name="list">
                <v-col md6 xs12 v-for="item in computedSeason[i].items"
                       style="display: inline-block"
                       :key="item.key">
                <v-row class="elem elevation-3" v-ripple="true">
                  <!-- Header of elem -->
                  <v-col xs12 v-tooltip:bottom="{ html: item.title }">
                    <h6 class="title ellipsis">
                      {{ item.title }}
                    </h6>
                  </v-col>
                  <v-col xs9 v-tooltip:bottom="{ html: item.genres.join(' ') }">
                    <p class="genres ellipsis">{{ item.genres.join(' ') }}</p>
                  </v-col>
                  <v-col xs3 v-tooltip:bottom="{ html: item.fromType }">
                    <p class="from-type ellipsis">
                      {{ item.fromType }}
                    </p>
                  </v-col>
                  <!-- Picture of elem -->
                  <v-col xs4 class="image-container">
                    <div class="image">
                      <img :src="item.picture" height="220" max-width="170"/>
                    </div>
                  </v-col>
                  <v-col xs8 class="bottom-right">
                    <v-row>
                      <v-col xs12 class="synopsis">
                        {{ reduced(item.synopsis) }}
                      </v-col>
                      <v-col xs7 class="date">{{ getDate(item.releaseDate) }}</v-col>
                      <v-col xs5 class="nb-ep">{{ item.nbEp }} {{ episode(item.npEp) }}</v-col>
                      <v-col xs8 class="producers"><strong>{{ item.producers.join(' ') }}</strong></v-col>
                      <v-col xs4 class="dropdown-container">
                        <v-menu transition="v-slide-x-transition">
                          <v-btn flat dark slot="activator">
                            More
                          </v-btn>
                          <v-list>
                            <v-list-item>
                              <v-list-tile v-on:click.native="openModal(item.title, item.synopsis)">
                                <v-list-tile-action>
                                  <v-icon>more</v-icon>
                                </v-list-tile-action>
                                <v-list-tile-title>
                                  Check synopsis
                                </v-list-tile-title>
                              </v-list-tile>
                            </v-list-item>
                            <v-list-item>
                              <v-list-tile>
                                <v-list-tile-action>
                                  <v-icon>info_outline</v-icon>
                                </v-list-tile-action>
                                <v-list-tile-title>Information</v-list-tile-title>
                              </v-list-tile>
                            </v-list-item>
                            <v-list-item>
                              <v-list-tile @click.native="showChoices(item.title)">
                                <v-list-tile-action>
                                  <v-icon>add_box</v-icon>
                                </v-list-tile-action>
                                <v-list-tile-title>
                                  Add to
                                </v-list-tile-title>
                              </v-list-tile>
                            </v-list-item>
                          </v-list>
                        </v-menu>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>
              </v-col>
              </transition-group>
            </v-row>
          </v-card>
        </v-tab-content>
      </v-tabs>
      <div class="text-xs-center modal-container">
        <v-dialog v-model="modal" width="70%">
          <v-card class="secondary white--text">
            <v-card-text class="white--text">
              <h2 class="title">{{ modalTitle }}</h2>
            </v-card-text>
            <v-card-text class="subheading white--text">
              {{ modalText }}
            </v-card-text>
            <v-card-row actions>
              <v-spacer></v-spacer>
              <v-btn primary dark
                     style="width: 100px"
                     v-on:click.native="modal = false">Thanks!
              </v-btn>
            </v-card-row>
          </v-card>
        </v-dialog>
      </div>
      <choice-window :entry="choiceTitle"></choice-window>
    </v-container>
  </v-container>
</template>

<script>
  import Loader from '~components/loader.vue'
  import ChoiceWindow from '~components/choiceWindow.vue'

  export default {
    head () {
      return {
        title: 'Seasons',
        meta: [
          {hid: 'description', name: 'description', content: 'Browse the anime seasons'}
        ]
      }
    },
    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: function () {
        return this.$store.state.seasons
      },
      stats: function () {
        return this.$store.state.seasonsStats
      },
      TVs: function () {
        return this.seasons.TV
      },
      OVAs: function () {
        return this.seasons.OVAs
      },
      Movies: function () {
        return this.seasons.Movies
      },
      season: function () {
        return [
          '',
          {name: 'TV', items: this.TVs},
          {name: 'OVA', items: this.OVAs},
          {name: 'Movies', items: this.Movies}
        ]
      },
      computedSeason: function () {
        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 ''
          })
      }
    },
    components: {
      Loader,
      ChoiceWindow
    },
    methods: {
      reduced (text) {
        return text.length > 270
          ? text.slice(0, 300) + '...'
          : text
      },
      getDate (string) {
        return string.split(' ').slice(0, 3).join(' ')
      },
      episode (nbEp) {
        return parseInt(nbEp) !== 1
          ? 'episodes'
          : 'episode'
      },
      refreshSeason () {
        this.$store.dispatch('refreshSeasons')
      },
      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;
  }

    /* ----------- FORM ---------- */
  .form-container
  {
    padding-top: 1.5%;
    padding-left: 50px;
    padding-right: 0;
  }

  .year-container
  {
    padding-left: 2.5%;
  }

  .season-container
  {
    padding-right: 1.5%;
  }

  .refresh-button
  {
    padding-top: 1%;
    padding-left: 6%;
    padding-right: 3%;
  }

  .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;
    margin: 5px 0 10px;
    background-color: rgb(60, 60, 60);
    color: rgba(255, 255, 255, 0.8);
  }

  .elem:hover
  {
    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;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.8);
  }

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

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

  .image-container
  {
    padding: 0;
  }

  .image
  {
    height: 220px;
    max-width: 170px;
  }

  .bottom-right
  {
    position: relative;
  }

  .synopsis
  {
    padding-left: 15px;
    padding-right: 15px;
    text-align: justify;
    min-height: 130px;
  }

  .date
  {
    margin-top: 5%;
  }

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

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