<template>
  <q-layout view="hHh LpR fFf">
    <q-header
      reveal
      bordered
      class="bg-primary text-white"
      v-if="$q.screen.lt.sm"
    >
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />

        <q-toolbar-title class="text-h6 text-weight-bold">
          <q-avatar>
            <img src="images/logo.png" />
          </q-avatar>
          Universo
        </q-toolbar-title>
      </q-toolbar>
    </q-header>
    <q-drawer
      v-model="leftDrawerOpen"
      side="left"
      :overlay="$q.screen.lt.sm"
      show-if-above
      :width="200"
      :breakpoint="500"
      bordered
      class="'bg-grey-3'"
    >
      <q-scroll-area class="fit">
        <q-list>
          <q-item
            clickable
            v-ripple
            class="q-mb-xl q-mt-sm"
            v-if="$q.screen.gt.xs"
            :to="{ name: 'start' }"
          >
            <q-item-section avatar>
              <q-avatar>
                <img src="images/logo.png" />
              </q-avatar>
            </q-item-section>
            <q-item-section class="text-h6 text-weight-bold"
              >Universo</q-item-section
            >
          </q-item>
          <template v-for="(menuItem, index) in menuList" :key="index">
            <q-item
              clickable
              v-ripple
              :to="{ name: menuItem.to }"
              v-if="
                (menuItem.requireAuth && !!getUserId) || !menuItem.requireAuth
              "
            >
              <q-item-section avatar>
                <q-icon :name="menuItem.icon" />
              </q-item-section>
              <q-item-section class="text-body1 text-weight-bold">
                {{ menuItem.label }}
              </q-item-section>
            </q-item>
            <q-separator
              :key="'sep' + index"
              v-if="
                menuItem.separator &&
                ((menuItem.requireAuth && !!getUserId) || !menuItem.requireAuth)
              "
            />
          </template>
          <q-item
            clickable
            v-ripple
            :to="!getUserId ? { name: button.to } : ''"
            @click="getUserId ? onLogout() : ''"
          >
            <q-item-section avatar>
              <q-icon :name="button.icon" />
            </q-item-section>
            <q-item-section class="text-body1 text-weight-bold">
              {{ button.label }}
            </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>
    </q-drawer>

    <q-page-container style="min-height: 100vh">
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { ref } from 'vue';
import { useCurrentUserStore } from 'src/stores/current-user';
import { mapState, mapActions } from 'pinia';
import { createMetaMixin } from 'quasar';
import { LocalStorage } from 'quasar';
import meta from '../utils/meta';

const menuList = [
  {
    icon: 'inbox',
    to: 'projects',
    label: 'Проекты',
    separator: false,
    requireAuth: true,
  },
  {
    icon: 'feedback',
    to: 'endless',
    label: 'Холст',
    separator: false,
    requireAuth: false,
  },
  {
    icon: 'feedback',
    to: 'endless2',
    label: 'Холст2',
    separator: false,
    requireAuth: false,
  },
  {
    icon: 'feedback',
    to: 'endless3',
    label: 'Холст3',
    separator: false,
    requireAuth: false,
  },
  {
    icon: 'manage_accounts',
    to: 'profile',
    label: 'Профиль',
    separator: true,
    requireAuth: true,
  },
];
const loginButton = {
  logout: {
    icon: 'logout',
    to: '',
    label: 'Выход',
    separator: false,
  },
  login: {
    icon: 'login',
    to: 'login',
    label: 'Вход',
    separator: false,
  },
};

export default {
  setup() {
    const leftDrawerOpen = ref(false);

    return {
      acceptCookies: ref(false),
      acceptCookiesMessage:
        'Мы используем файлы cookies. <br/> Чтобы улучшить работу сайта и предоставить вам больше возможностей.',
      loginButton,
      menuList,
      leftDrawerOpen,
      toggleLeftDrawer() {
        leftDrawerOpen.value = !leftDrawerOpen.value;
      },
    };
  },

  mixins: [
    createMetaMixin(function () {
      return meta(this.metaTags);
    }),
  ],
  computed: {
    ...mapState(useCurrentUserStore, ['getUserId']),
    button() {
      return this.getUserId ? this.loginButton.logout : this.loginButton.login;
    },
    title: function () {
      return this.$route?.meta?.title;
    },

    metaTags() {
      return {
        title: this.title,
        description:
          'Погрузитесь через РВМ Универсо в гипервселенную — бесконечное пространство исследований, цифровизации и социального взаимодействия в метавселенных. Функционал Общественного КиберГосплана поможет управлять вашими проектами и организациями, объединиться в рамках Омского Международного Плана, создавать в любой точке мира новые Народные предприятия, Профсоюзы, Советы и любые проекты по интересам.',
        keywords:
          'гипервселенная, метавселенные, госплан, кибергосплан, проекты, народные, предприятия, профсоюзы, советы, холсты, карточки, игры, работа',
        url: process.env.APP_HOST + this.$route.path,
        image: '',
        robots: '',
      };
    },
  },
  mounted() {
    this.acceptCookies = !!LocalStorage.getItem('acceptCookies');

    if (!this.acceptCookies) {
      setTimeout(() => {
        this.$q.notify({
          //progress: true,
          message: this.acceptCookiesMessage,
          color: 'red',
          multiLine: true,
          timeout: 0,
          html: true,
          actions: [
            {
              label: 'Согласен',
              color: 'white',
              handler: () => {
                this.acceptCookies = true;
                LocalStorage.set('acceptCookies', true);
              },
            },
          ],
        });
      }, 2000);
    }
    if (LocalStorage.getItem('jwt_token')) {
      this.getMe();
    }
  },
  methods: {
    ...mapActions(useCurrentUserStore, ['getMe', 'logout']),
    onLogout() {
      this.logout()
        .then((res) => {
          console.log('result', res);
          this.$router.push({ name: 'start' });
        })
        .catch((res) => {
          console.log('error', res);
        });
    },
  },
};
</script>
