<script setup>

import { Colors } from "@/ThemeConfig.vue";
import {defineProps, ref, computed, watch} from "vue";
import { defineSlots } from "vue";
import UserNavigationTop from "@/components/displays/user/UserNavigationTop.vue";
import Footer from "@/components/global/Footer.vue";
import {IS_DEV} from "@/main.js";

defineProps({
  title: String,
  subtitle: String
})

const slots = defineSlots()

const IS_EXPANDED = ref(false)
const TOGGLE_EXPANDED = () => {
  IS_EXPANDED.value = !IS_EXPANDED.value
}

const isMobile = ref(window.innerWidth < 768)

const handleResize = () => {
  isMobile.value = window.innerWidth < 768
}
window.addEventListener('resize', handleResize)


const applyScreenDependingClasses = (shouldApply, classes) => {
  return shouldApply ? classes : []
}
</script>

<template>
  <div class="columns is-multiline" >
    <!-- Header -->
    <div
        class="column is-12 is-vcentered"
        :style="{ 'background-color': Colors.headers.backgroundColor, 'color': Colors.headers.textColor }"
        style="margin-bottom: 0; padding-bottom: 0;"
    >
      <div class="columns is-vcentered is-mobile">
        <!-- Spacer -->
        <div class="column"></div>
        <!-- Page title -> Subtitle -->
        <div class="column is-6 pl-6">
          <!-- Page title (If any) -->
          <span
              class="is-size-4"
              v-if="title"
          >
            {{ title }}
          </span>
          <!-- Page subtitle (If any) -->
          <!--
          <span
              class="is-size-6"
              v-if="subtitle"
              :class="{ 'is-size-5': !title, 'pl-2': title }"
          >
            {{ subtitle }}
          </span>
          -->
        </div>
        <!-- Header slot -->
        <div class="column">
          <slot name="header"></slot>
        </div>
        <!-- User navigation -->
        <div class="column">
          <UserNavigationTop class="my-4 is-float-right" style="margin-right: 5rem;" :style="{ 'color': Colors.headers.textColor }" />
        </div>
      </div>
    </div>
    <!-- Left menu / Mobile menu-->
    <div class="column is-2 is-continuous-to-bottom"
         :style="{ 'background-color': Colors.menus.parentBackgroundColor, 'color': Colors.menus.textColor }"
    >
      <div class="is-hidden-mobile">
        <slot name="left-menu"></slot>
        <!-- Development version display -->
        <div class="is-fixed-bottom" v-if="IS_DEV">
          <div class="has-text-centered">
          <span class="is-size-6 has-text-warning">
            IS_DEV ON
          </span>
          </div>
        </div>
      </div>
      <!-- Mobile menu -->
      <div class="is-fixed-bottom is-hidden-desktop is-hidden-tablet is-clickable" @click="TOGGLE_EXPANDED">
        <div class="has-text-centered">
          <span class="is-size-6 has-text-warning">
            <!-- Expanded toggle button -->
            <button
                class="button is-small is-warning"
                :style="{ 'background-color': Colors.menus.parentBackgroundColor, 'color': Colors.menus.textColor }"
            >
              <span class="icon">
                <i :class="IS_EXPANDED ? 'fas fa-angle-up' : 'fas fa-angle-down'"></i>
              </span>
              <span>
                {{ IS_EXPANDED? 'Collapse':'Expand' }}
              </span>
            </button>
          </span>
          <!-- Expanded menu -->
          <div v-if="IS_EXPANDED" class="is-hidden-desktop">
            <slot name="left-menu"></slot>
          </div>
        </div>
      </div>
    </div>
    <!-- Page content -->
    <div
        v-if="!IS_EXPANDED"
        class="column is-10"
        :style="{ 'background-color': Colors.global.backgroundColor, 'color': Colors.global.textColor }"
        style="min-height: 100vh;"
    >
      <div v-bind:class="[
          ...applyScreenDependingClasses(!isMobile, ['pl-6', 'pr-6', 'pb-6']),
          ...applyScreenDependingClasses(isMobile, ['pl-2', 'pr-2', 'pb-2']),
        ]">
        <!-- Buttons slot -->
        <template v-if="slots.buttons">
          <slot name="buttons"></slot>
        </template>
        <!-- Default slot -->
        <template v-if="slots.default">
          <slot name="default"></slot>
        </template>
      </div>
      <div v-if="slots.withoutFormatting">
        <slot name="without-formatting"></slot>
      </div>
    </div>
    <!-- Footer
    <div class="column is-12">
      <Footer />
    </div> -->
  </div>
</template>

<style scoped>
</style>