<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer"
        />

        <q-toolbar-title>
          Auburn Oil
        </q-toolbar-title>
        <div>
          <div v-if="user.user_id > 0">
            Welcome {{ employee.employee_first_name }} {{ employee.employee_last_name }}
          </div>
          <div v-else>
            <router-link :to="{ name: 'login' }" class="">
              <q-btn color="secondary" label="Login"/>
            </router-link>
          </div>
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
    >
      <q-list padding>
        <router-link :to="{ name: 'home' }" class="nodec">
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="inbox"/>
            </q-item-section>
            <q-item-section>
              Home
            </q-item-section>
          </q-item>
        </router-link>
        <router-link :to="{ name: 'today' }" class="nodec">
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="inbox"/>
            </q-item-section>
            <q-item-section>
              Todays Deliveries
            </q-item-section>
          </q-item>
        </router-link>
        <router-link :to="{ name: 'tomorrow' }" class="nodec">
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="drafts"/>
            </q-item-section>
            <q-item-section>
              Tomorrow Deliveries
            </q-item-section>
          </q-item>
        </router-link>
        <router-link :to="{ name: 'waiting' }" class="nodec">
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="drafts"/>
            </q-item-section>
            <q-item-section>
              Waiting Deliveries
            </q-item-section>
          </q-item>
        </router-link>
        <router-link :to="{ name: 'stats' }" class="nodec">
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="star"/>
            </q-item-section>
            <q-item-section>
              Stats
            </q-item-section>
          </q-item>
        </router-link>
        <router-link :to="{ name: 'stats' }" class="nodec">
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="send"/>
            </q-item-section>
            <q-item-section>
              Automatics
            </q-item-section>
          </q-item>
        </router-link>


      </q-list>

    </q-drawer>

    <q-page-container>
      <router-view/>
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import authHeader from "../services/auth.header"
import axios from "axios"

export default defineComponent({
  name: 'MainLayout',

  components: {},

  data() {
    return {
      user: {
        user_id: 0,
        uuid: '',
        api_key: '',
        username: '',
        password_hash: '',
        member_since: '',
        email: '',
        last_seen: '',
        admin: 0,
        admin_role: 0,
        confirmed: 0

      },
      loaded: false,
      employee: {
        id: '',
        employee_last_name: "",
        employee_first_name: "",
        employee_town: "",
        employee_address: "",
        employee_apt: "",
        employee_zip: "",
        employee_birthday: "",
        employee_phone_number: "",
        employee_start_date: "",
        employee_end_date: "",
        employee_type: '',
        employee_state: ''
      },
      leftDrawerOpen: false
    }
  },
  created() {
    this.userStatus()
  },
  methods: {
    toggleLeftDrawer() {
      this.leftDrawerOpen = !this.leftDrawerOpen
    },
    userStatus() {
      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami'
      axios({
        method: 'get',
        url: path,
        withCredentials: true,
        headers: authHeader()
      })
        .then((response: any) => {
          if (response.data.ok) {
            this.user = response.data.user
            this.getEmployee(this.user.user_id)
          } else {
            this.user.user_id = 0
          }
        })
    },
    getEmployee(userid: any) {
      const path = import.meta.env.VITE_BASE_URL + "/employee/" + userid
      axios({
        method: "get",
        url: path,
        withCredentials: true,
        headers: authHeader()
      })
        .then((response: any) => {
          if (response.data) {
            this.employee = response.data
            this.loaded = true
          }
        })
    }
  }
})
</script>

<style>

.nodec {
  text-decoration: none;
}
</style>
