<template>
  <q-layout view="hHh lpR fFf" class="shadow-2 rounded-borders">
    <q-header bordered class="bg-grey-3 text-primary  ">
      <q-toolbar>
        <!-- <q-btn dense flat round icon: "" @click="toggleLeftDrawer" /> -->

        <q-btn dense flat round @click="toggleLeftDrawer">
      <q-avatar size="60px">
        <img src="https://sun6-23.userapi.com/s/v1/ig2/hDL8RukXXy3iviZjuk6Csg77DzCRbu2MQq1RhW2Cgp9RsPy1NMoZGfZ8hxmBc0Rs3BAd6rT5pVR99kBqKmJ0X9mf.jpg?size=774x774&quality=96&crop=0,0,774,774&ava=1">
      </q-avatar>
    </q-btn>
  

      <div color=000000>
        <q-toolbar-title text-color="white" > Universo</q-toolbar-title>
      </div>
      <div class="q-pa-md">
    <q-linear-progress indeterminate />

    <q-linear-progress indeterminate color="warning" class="q-mt-sm" />

    <q-linear-progress indeterminate color="secondary" class="q-mt-sm" />

    <q-linear-progress indeterminate rounded color="accent" class="q-mt-sm" />

    <q-linear-progress indeterminate rounded track-color="orange" color="purple" class="q-mt-sm" />

    <q-linear-progress indeterminate rounded color="negative" class="q-mt-sm" />
  </div>

  <div class="q-pa-md">

  </div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      side="left"
      behavior="desktop"
    >
      <q-list>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
        <q-item v-if="isLoggedIn" clickable @click="onLogout">
          <q-item-section avatar>
            <q-icon name="close" />
          </q-item-section>
          <q-item-section>
            <q-item-label> Выход </q-item-label>
          </q-item-section>
        </q-item>
        <q-item v-else clickable to="/register">
          <q-item-section avatar>
            <q-icon name="login" />
          </q-item-section>
          <q-item-section>
            <q-item-label> Вход </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

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

<script lang="ts">
import { defineComponent, ref } from 'vue';
import EssentialLink from 'components/EssentialLink.vue';
import { useAuthStore } from 'stores/auth.js';
import { mapActions, mapState } from 'pinia';

const linksList = [
{
    title: 'Проекты',
    icon: 'folder',
    link: 'http://localhost:9000/profil',
  },
{
    title: 'Профиль',
    icon: 'event',
    link: 'http://localhost:9000/user',
  },

];

export default defineComponent({
  name: 'MainLayout',

  components: {
    EssentialLink,
  },
  computed: {
    ...mapState(useAuthStore, ['isLoggedIn']),
    test: () => {
      return 1;
    },
  },
  methods: {
    ...mapActions(useAuthStore, ['login']),
    ...mapActions(useAuthStore, ['logout']),
    ...mapActions(useAuthStore, ['getMe']),
    ...mapActions(useAuthStore, ['getLocalStorage']),
    onLogin() {
      this.login(this.email, this.password, true)
        .then(() => {
          this.$router.push('/avtoriz');
        })
        .catch((error) => {
          console.log(error.message);
        });
    },

    onLogout() {
      this.logout().then(() => {
        this.$router.push('/avtoriz');
      });
    },

  },
  mounted() {
    this.getLocalStorage()
      .then(() => this.getMe())
      .catch(() => {
        if (this.$route.meta.requiresAuth) {
          this.$router.push('/');
        }
      });
  },
  setup() {
    const leftDrawerOpen = ref(false);

    return {
      essentialLinks: linksList,
      leftDrawerOpen,
      toggleLeftDrawer() {
        leftDrawerOpen.value = !leftDrawerOpen.value;
      },
    };
  },
});
</script>
