const apiPrefix = `https://api.punkapi.com/v2/`;

const ModuleCompared = Vue.component(`module-compared`, {
  // Props
  props: {
    value: {
      type: [
        Number,
        String,
      ],
    },
    decimals: {
      type: Number,
      default: 1,
    },
    unit: {
      type: String,
      default: ``,
    },
  },
  
  // Template
  template: `
    <span class="compared" v-if="value || value === 0">
      <template v-if="value === 0">(=)</template>
      <template v-else-if="typeof(value) === \`string\`">String comparison</template>
      <template v-else>({{ value >= 0 ? \`+\` : \`\` }}{{ value.toFixed(decimals) }}{{ unit ? \` \${unit}\` : \`\` }})</template>
    </span>`,
});

const ModuleCard = Vue.component('module-card', {
  // Components
  components: {
    'module-compared': ModuleCompared,
  },
  
  // Props
  props: {
    beer: {
      type: Object,
      default: () => {},
    },
    compare: {
      type: Object,
      default: () => {},
    },
  },
  
  // Data
  computed: {
    compared() {
      const compare = this.compare;
      const beer = this.beer;
      
      if (!compare || compare.id === beer.id) return {};
      
      console.log(this.compare.name, this.compare);
      
      return {
        abv: compare.abv ? (beer.abv - compare.abv) : false,
        ph: compare.ph ? (beer.ph - compare.ph) : false,
        ibu: compare.ibu ? (beer.ibu - compare.ibu) : false,
        ebc: compare.ebc ? (beer.ebc - compare.ebc) : false,
        volumeValue: beer.volume && compare.volume ? (beer.volume.value - compare.volume.value) : false,
        boilVolumeValue: beer.volume && compare.boil_volume ? (beer.boil_volume.value - compare.boil_volume.value) : false,
      };
    },
  },
  
  // Methods
  methods: {
    onClick() {
      this.$emit(`select-beer`, this.beer.id);
    },
    getSet(set) {
      const map = {
        malt: `Malt`,
        hops: `Hops`,
        yeast: `Yeast`,
      };
      
      return map[set] || set;
    },
  },
  
  // Template
  // template: `<div>Test</div>`;
  template: `
    <div
      v-if="beer"

      :class="[
        \`card\`,
        {
          'card--compare': compare,
        },
      ]"

      @click="onClick"
    >
      <span class="card__saved" v-if="compare">Saved</span>
      <span class="card__title">{{ beer.name }}</span>
      <span class="card__abv">
        {{ beer.abv }}% ABV
        <module-compared :value="compared.abv" />
      </span>
      <span class="card__tagline">{{ beer.tagline }}</span>

      <dl class="card__details">
        <template v-if="beer.ibu">
          <dt><abbr title="International Bitterness Units">IBU</abbr></dt>
          <dd>{{ beer.ibu.toFixed(1) }} <module-compared :value="compared.ibu" /></dd>
        </template>

        <template v-if="beer.ebc">
          <dt><abbr title="European Brewery Convention">EBC</abbr></dt>
          <dd>{{ beer.ebc.toFixed(1) }} <module-compared :value="compared.ebc" /></dd>
        </template>

        <template v-if="beer.ph">
          <dt><abbr title="Acidity">pH</abbr></dt>
          <dd>{{ beer.ph.toFixed(1) }} <module-compared :value="compared.ph" /></dd>
        </template>

        <template v-if="beer.volume">
          <dt><attr title="Volume">Vol.</attr></dt>
          <dd>{{ beer.volume.value }} {{ beer.volume.unit }} <module-compared :value="compared.volumeValue" :unit="beer.volume.unit" :decimals="0" /></dd>
        </template>

        <template v-if="beer.boil_volume">
          <dt><attr title="Boil Volume">Boil Vol.</attr></dt>
          <dd>{{ beer.boil_volume.value }} {{ beer.boil_volume.unit }} <module-compared :value="compared.boilVolumeValue" :unit="beer.boil_volume.unit" :decimals="0" /></dd>
        </template>
      </dl>

      <hr>

      <span class="card__ingredients">
        <span>Ingredients</span>
        <ul>
            <li v-for="(ingredients, set) in beer.ingredients" :key="set">
              <span class="">{{ getSet(set) }}</span>
              <ul>
                <li v-if="typeof(ingredients) === \`string\`">{{ ingredients }}</li>
                <template v-else>
                  <li v-for="(ingredient, index) in ingredients" :key="index">
                    {{ ingredient.name }}
                    <template v-if="ingredient.amount">({{ ingredient.amount.value }} {{ ingredient.amount.unit }})</template>
                  </li>
                </template>
              </ul>
            <li>
        </ul>
      </span>
    </div>`,
});

const app = new Vue({
  el: '#app',
  
  // Components
  components: {
    'module-card': ModuleCard,
  },
  
  // Data
  data() {
    return {
      loading: false,
      beers: {},
      saved: ``,
      current: ``,
      perPage: 10,
      page: 1,
    };
  },
  computed: {
    beersKeys() {
      return Object.keys(this.beers);
    },
    beersLength() {
      return this.beersKeys.length;
    },
    nextPrev() {
      const keys = this.beersKeys;
      const index = keys.indexOf(this.current);
      
      let next = false;
      let prev = false;
      
      if (index >= 0) {
        next = keys[index + 1] || false;
        prev = keys[index - 1] || false;

        // if (prev < 0) prev = false;
        // if (next > this.beersLength) next = false;
      }
      
      return {
        next,
        prev,
      };
    },
  },
  watch: {
    'nextPrev.next': {
      handler(next) {
        if (!next) this.getBeers({
          page: `next`,
        });
      },
    },
  },
  
  // Methods
  methods: {
    getBeers({ page }) {
      if (this.loading) return;
      
      this.loading = true;
      this.page = page === `next` ? this.page + 1 : page;
      
      fetch(`${apiPrefix}beers/?page=${this.page}&per_page=${this.perPage}`)
        .then(res => res.json())
        .then((json = []) => {
          json.forEach(beer => {
            beer.id = `${beer.id}`;
            const id = beer.id;

            this.$set(this.beers, id, beer);
            
            if (!this.saved) this.saved = id;
            else if (!this.current) this.current = id;
          });
        
          setTimeout(() => {
            this.loading = false;
          }, 250);
        });
    },
    showBeer(nextPrev) {
      if ((nextPrev === `next` && !this.nextPrev.next) || (nextPrev === `prev` && !this.nextPrev.prev)) return;
      
      const index = this.nextPrev[nextPrev];
      
      this.current = index;
    },
    setSaved(id) {
      this.saved = id;
    },
  },
  
  // Lifecycle
  mounted() {
    this.getBeers({
      page: 1,
    });
  },
})