<template>
  <div>
    <q-tabs v-if="$q.screen.gt.sm" v-model="tab">
      <q-tab
        v-for="(tabindex, index) in tabs"
        :key="'tab' + index"
        :name="tabindex.name"
        :label="tabindex.label"
      />
    </q-tabs>
    <div v-else class="fit row justify-end">
      <q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer"></q-btn>
    </div>
    <q-drawer v-model="showDrawer" side="right" behavior="mobile" @click="showDrawer = !showDrawer">
      <q-list v-model="tab">
        <q-item
          v-for="(tabindex, index) in tabs"
          :key="'tab' + index"
          :active="tab == tabindex.name"
          clickable
          @click="tab = tabindex.name"
        >
          <q-item-label>{{ tabindex.label }}</q-item-label>
        </q-item>
      </q-list>
    </q-drawer>
    <q-page paddding class="fit row justify-center content-start items-start q-gutter-sm">
      <q-tab-panels
        v-model="tab"
        style="background-color: transparent"
        animated
        class="q-ma-none q-pa-none fit row justify-center content-start items-start"
      >
        <q-tab-panel name="pricelist">
          <calculation-table />
        </q-tab-panel>
        <q-tab-panel name="extra_ingredients">
          <extra-ingredients />
        </q-tab-panel>
        <q-tab-panel name="drink_types">
          <drink-types />
        </q-tab-panel>
      </q-tab-panels>
    </q-page>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount, ref } from 'vue';
import { Screen } from 'quasar';
import DrinkTypes from 'src/plugins/pricelist/components/DrinkTypes.vue';
import CalculationTable from 'src/plugins/pricelist/components/CalculationTable.vue';
import ExtraIngredients from 'src/plugins/pricelist/components/ExtraIngredients.vue';
import { usePricelistStore } from 'src/plugins/pricelist/store';
export default defineComponent({
  name: 'Settings',
  //components: { DrinkTypes, ExtraIngredients, CalculationTable },
  components: { ExtraIngredients, DrinkTypes, CalculationTable },
  setup(_) {
    interface Tab {
      name: string;
      label: string;
    }
    const store = usePricelistStore()
    onBeforeMount(() => {
      store.getExtraIngredients().then(() => {
        console.log(store.extraIngredients)
      }).catch(err => console.log(err))
      void store.getDrinkTypes()
      store.getDrinks()
    })

    const drawer = ref<boolean>(false);

    const showDrawer = computed({
      get: () => {
        return !Screen.gt.sm && drawer.value;
      },
      set: (val: boolean) => {
        drawer.value = val;
      }
    });

    const tabs: Tab[] = [
      { name: 'pricelist', label: 'Getränke' },
      { name: 'extra_ingredients', label: 'Zutaten' },
      { name: 'drink_types', label: 'Getränketypen' }
    ];

    const tab = ref<string>('pricelist');

    return { tabs, tab, showDrawer };
  }
});
</script>

<style scoped></style>
