<template>
  <q-layout class="w-layout" :view="view" :container="container">
    <q-drawer
      v-if="hasLeftDrawer"
      v-model="leftDrawerOpen"
      :mini="leftDrawerMini"
      :mini-width="80"
      :width="250"
      elevated
      :class="['left-drawer', 'q-py-xs', ...drawerContentClassArray]"
    >
      <div class="column fit">
        <div class="logo-container">
          <div class="row no-wrap justify-between items-center q-pa-md">
            <w-logotype
              v-if="leftDrawerOpen && !leftDrawerMini"
              :text="productName"
              orientation="vertical"
              :class="{ 'cursor-pointer': logotypeClickable }"
              :logo-url="logoUrl"
              :dark-logo-url="darkLogoUrl"
              @click="$emit('logotype-click')"
            />
            <div v-else />
            <w-btn
              v-if="hasLeftDrawer"
              class="text-grey-6"
              aria-label="Menu"
              round
              flat
              color="white"
              :icon="leftDrawerOpen && !leftDrawerMini ? 'fal fa-angle-double-left' : 'fal fa-angle-double-right'"
              @click="toggleLeftDrawer()"
            />
          </div>
        </div>
        <div class="col fit">
          <slot name="left-drawer" />
        </div>
      </div>
    </q-drawer>
    <slot>
      <q-page-container>
        <router-view />
      </q-page-container>
    </slot>
    <q-page-sticky position="top-right" :offset="[50, 10]">
      <slot name="top-right-sticky" />
    </q-page-sticky>
    <q-page-sticky position="top-left" :offset="[10, 10]" style="z-index: 100;">
      <slot name="top-left-sticky">
        <w-btn
          v-if="!leftDrawerOpen"
          class="text-grey-6"
          aria-label="Menu"
          flat
          round
          icon="fal fa-angle-double-right"
          @click="leftDrawerOpen=true"
        />
      </slot>
    </q-page-sticky>
    <span class="absolute-top-right">
      <slot name="top-right-absolute" />
    </span>
    <q-footer class="footer" reveal>
      <slot name="footer" />
    </q-footer>
  </q-layout>
</template>

<script>
import { QLayout } from "quasar";

export default {
  name: "WLayout",
  components: { QLayout },
  props: {
    view: {
      type: String,
      default: "hHh LpR lff",
    },
    productName: {
      type: String,
      default: null,
    },
    toolbarTitle: {
      type: String,
      default: null,
    },
    logotypeClickable: {
      type: Boolean,
      default: false,
    },
    container: {
      type: Boolean,
      default: false,
    },
    drawerContentClass: {
      type: String,
      default: null,
    },
    logoUrl: {
      type: String,
      default: undefined,
    },
    darkLogoUrl: {
      type: String,
      default: undefined,
    },
  },
  emits: ["logotype-click"],
  data() {
    return {
      leftDrawerOpen: true,
      leftDrawerMini: false,
    };
  },
  computed: {
    hasLeftDrawer() {
      return !!this.$slots["left-drawer"];
    },
    drawerContentClassArray() {
      return this.drawerContentClass?.split(" ") || [];
    }
  },
  methods: {
    toggleLeftDrawer() {
      if (this.$q.screen.gt.sm) {
        this.leftDrawerOpen = true;
        this.leftDrawerMini = !this.leftDrawerMini;
      } else {
        this.leftDrawerMini = false;
        this.leftDrawerOpen = !this.leftDrawerOpen;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
  .logo-container{
    height: 80px
    }
</style>
