Vue.component('warehouse-history-modal', {
    //language=Vue
    template: `
                <tt-modal :show.sync="showModal" title="History" :delete="false" :save="false"
                @close="$emit('update:show', false)"
                >
                  <tt-table 
                      v-if="showModal"
                      :sticky="false"
                      :fetch-url="window['TT_CONFIG']['BASE_URL'] + '/getHistory?id=' + id"
                            :config="WarehouseHistoryTableConfig" small>

                    <template v-slot:create="{ row }">
                      {{ window.moment(row.create * 1000).format('DD.MM.YYYY HH:mm:ss') }}
                    </template>

                  </tt-table>
                </tt-modal>
              `,
    props: {
        show: { type: Boolean, default: false },
        id: { type: Number, default: null },
    },
    data() {
        return {
            window: window,
            showModal: false,
            WarehouseHistoryTableConfig: {
                key: 'WarehouseHistory',
                tableHeader: 'Lager Historie',
                headers: [
                    {text: "Zeit", key: "create", filter: false, sortable: false},
                    {text: "Feld", key: "columnHeader", filter: false, sortable: false},
                    {text: "Alter Wert", key: "old_value", filter: false, sortable: false},
                    {text: "Neuer Wert", key: "new_value", filter: false, sortable: false},
                    {text: "Geändert von", key: "user_name", filter: false, sortable: false},
                ],
            }
        }
    },
    watch: {
        show(newVal) {
            this.showModal = newVal
        }
    }
})

Vue.component('tt-expandable-shopping-cart', {
    props: {
        cartItems: Array,
    },
    data() {
        return {
            isExpanded: false,
        };
    },
    methods: {
    },
    template: `
  <div class="tt-expandable-shopping-cart" :class="{ expanded: isExpanded }">
    <button class="toggle-button" @click="isExpanded = !isExpanded">
      <i class="fas fa-shopping-cart text-primary"></i>
        <span v-if="cartItems.length > 0 && isExpanded" class="btn btn-primary" @click.prevent="$emit('submitOrder')">Bestellen</span>
      <span class="cart-count" v-if="cartItems.length > 0">{{ cartItems.length }}</span>
      <!-- add arrow down icon when cart is expanded additionally with v-if -->
        <i v-if="isExpanded" class="fas fa-arrow-down text-danger" style="font-size:21px;grid-column: 4;"></i>
    </button>
    <div class="cart-content" v-if="isExpanded">
      <div v-if="cartItems.length > 0">
        <h3>Einkaufswagen</h3>
        <ul class="list-group">
          <template v-for="item in cartItems">
          <li class="list-group-item" style="display:grid;grid-template-columns: 1fr auto;gap: 10px;">
            {{ item.title }}
            <div style="display:grid;grid-template-columns: 1fr 1fr;gap: 10px;">
              <span class="badge badge-primary badge-pill" style="height: 16px">{{ item.amount }}</span>
              <i style="cursor: pointer" class="fas fa-trash-alt text-danger" @click="cartItems.splice(cartItems.indexOf(item), 1)"></i>
            </div>
          </li>
            </template>
        </ul>
      </div>
      <p v-else>Der Einkaufswagen ist leer.</p>
    </div>
  </div>
  `
});


//TODO: put this in its own file
//TODO: also for tt-crud or vuehelper create a check for utility folder and include all js files in there to allow adding custom components that are not part of the core
//TODO: also add a component for a switch like this as we will need it more often either with value or doing redirect on click

Vue.component('warehouse-administration-switch', {
    //language=Vue
    template: `
        <div class="device-view-switch" style="margin-bottom: 10px">
          <div v-if="!isOverflowing" class="button-group" style="display:grid; grid-template-columns: repeat(5, 1fr); gap: 10px; justify-content: center; align-items: center; text-align: center; width: 100%;">
            <button @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseDistributor';" :class="{ 'active': window.location.href.includes('WarehouseDistributor') }" class="btn btn-primary">Lieferanten</button>
            <button @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseLocation';" :class="{ 'active': window.location.href.includes('WarehouseLocation') }" class="btn btn-primary">Lagerorte</button>
            <button @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseArticlePriceType';" :class="{ 'active': window.location.href.includes('WarehouseArticlePriceType') }" class="btn btn-primary">Preistypen</button>
            <button @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseCategory';" :class="{ 'active': window.location.href.includes('Device') }" class="btn btn-primary">Kategorie</button>
            <button @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseAdministration';" :class="{ 'active': window.location.href.includes('Device') }" class="btn btn-primary">Admin-Tools</button>
          </div>
          <div v-else>
            <div class="dropdown">
              <button @click="showDropdown = !showDropdown" 
                      class="btn btn-primary dropdown-toggle">Ansicht</button>
              <div v-show="showDropdown" class="dropdown-menu show">
                <a href="#" @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseDistributor'; showDropdown = false" class="dropdown-item">Lieferanten</a>
                <a href="#" @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseArticlePriceType'; showDropdown = false" class="dropdown-item">Lagerorte</a>
                <a href="#" @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseLocation'; showDropdown = false" class="dropdown-item">Preistypen</a>
                <a href="#" @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseCategory'; showDropdown = false" class="dropdown-item">Kategorie</a>
                <a href="#" @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseAdministration'; showDropdown = false" class="dropdown-item">Admin-Tools</a>
                
              </div>
            </div>
          </div>
        </div>
      `,
    props: ['value'],
    data() {
        return {
            isOverflowing: false,
            showDropdown: false,
            window: window,
        };
    },
    mounted() {
        this.checkOverflow();
        window.addEventListener('resize', this.checkOverflow);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.checkOverflow);
    },
    methods: {
        checkOverflow() {
            this.isOverflowing = window.innerWidth < 650
        },
    },
})