<template>
  <div class="home">
    <div class="tab-bg">
      <div class="wrapper">
        <div class="tab-control">
          <a v-for="(tab, index) of tabs" :key="index" @click="changeTab(tab)" :class="{ active: tab.active }">{{ tab.name }}</a>
        </div>
      </div>
    </div>
    <Search :items="items" :properties="properties" :extra="extra" :search-operation="searchOperation" :filtered.sync="filtered"/>
    <div class="wrapper">
      <ItemBoxes :filtered="filtered" :properties="properties" :extra="extra" :type="activeTab.type" @send-search-operation="sendSearchOperation"/>
    </div>
  </div>
</template>

<script>
import { API } from 'aws-amplify';
import { listWorks, listMaterials, listMechanisms } from '../graphql/queries';
import Search from '@/components/Search.vue';
import ItemBoxes from '@/components/ItemBoxes.vue';

export default {
  components: {
    Search,
    ItemBoxes
  },
  created() {
    this.listItems();
  },
  data() {
    return {
      items: [],
      extra: null,
      filtered: [],
      searchOperation: null,
      properties: {
        name: 'Nosaukums',
        id: 'ID',
        createdAt: 'Izveidošanas datums',
        updatedAt: 'Atjaunošanas datums',
        unit_of_measurement: 'Mērvienība',
        owner: 'Lietotājs',
        manufacturer_name: 'Izstrādātājs',
        amount: 'Daudzums',
        price: 'Cena (EUR)',
        code: 'Kods',
        time_norm: 'Laika norma (c/h)',
        pay_rate: 'Darba samaksas likme (EUR/h)',
        materials: 'Materiālu skaits',
        mechanisms: 'Mehānismu skaits'
      },
      tabs: [
        {
          name: 'Darbi',
          type: 'works',
          data: null,
          active: true
        },{
          name: 'Materiāli',
          type: 'materials',
          data: null,
          active: false
        },{
          name: 'Mehānismi',
          type: 'mechanisms',
          data: null,
          active: false
        }
      ]
    };
  },
  computed: {
    activeTab() {
      return this.tabs.find(x => x.active);
    }
  },
  methods: {
    async listItems(type = 'works', data) {
      var query;
      switch(type) {
        case 'works':
          [query, this.extra] = [{ listWorks }, ['materials', 'mechanisms']];
          break;
        case 'materials':
          [query, this.extra] = [{ listMaterials }, null];
          break;
        case 'mechanisms':
          [query, this.extra] = [{ listMechanisms }, null];
          break;
        default:
          return;
      }
      
      if (data) {
        this.items = data;
      } else {
        this.items = [];
        const queryName = Object.keys(query)[0];
        const items = await API.graphql({
          query: query[queryName]
        });
        this.items = items.data[queryName].items;
        this.tabs.find(x => x.type === type).data = items.data[queryName].items;
      }
    },
    changeTab(tab) {
      if (!tab.active) {
        this.activeTab.active = false;
        tab.active = true;
        this.listItems(tab.type, tab.data);
      }
    },
    sendSearchOperation(operation) {
      this.searchOperation = operation;
    }
  }
}
</script>

<style scoped>
.tab-bg {
  background: #5d758e;
}
.tab-control {
  display: flex;
}
.tab-control a {
  flex: 1;
  padding: 20px 15px 15px 15px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.tab-control .active {
  border-top: 5px solid #42b983;
  background: #2c3e50;
  padding: 15px;
}
.tab-control a:not(.active):hover {
  background: #67809a;
}
.wrapper {
  max-width: 1300px;
  margin: 0 auto;
}
@media screen and (max-width: 400px) {
  .tab-control {
    flex-direction: column;
  }
}
</style>