<template>
  <div class="card" :class="{'header-less': !header, 'title-less': !header && !title}">
    <div v-if="!loading && header!=''" class="card-header" :class="{clickable: isCollapsed !== null, 'primary': primary, 'bg-primary': primary, 'text-light': primary}" @click="if(isCollapsed !== null){isCollapsed = !isCollapsed;}">
      <slot name="title">{{header}}</slot>
      <SmartTimestamps v-if="timestamps" :row="timestamps"/>
      <a v-if="isCollapsed !== null && !isCollapsed" class="float-end text-secondary"><i class="fas fa-chevron-up"/></a>
      <a v-if="isCollapsed !== null && isCollapsed" class="float-end text-secondary"><i class="fas fa-chevron-down"/></a>
    </div>
    <div v-if="loading" class="card-header" :class="{'primary': primary, 'bg-primary': primary}">
      &nbsp;
    </div>
    <div :class="{'container-fluid' : sidebar, 'card-sidebar-hidden' : sidebar && isSidebarHidden}">
      <div :class="{'row' : sidebar, 'position-relative': sidebar}">
        <div v-if="sidebar" class="card-sidebar" :class="{'col-2' : sidebar && !isSidebarHidden}">
          <div class="card-sidebar-content"><slot name="sidebar" /></div>
          <!--a href="#" class=" card-sidebar-toggle" @click="isSidebarHidden = !isSidebarHidden"><span class="badge rounded-pill"><i class="fa" :class="{'fa-chevron-right' : isSidebarHidden, 'fa-chevron-left' : !isSidebarHidden}" /></span></a-->
        </div>
        <div :class="{'col-12' : sidebar && isSidebarHidden, 'col-10': sidebar && !isSidebarHidden}">
          <div v-if="header=='' || !isCollapsed" class="card-body">
            <h2 v-if="title!='' && title" class="card-title" :class="{clickable: isCollapsed !== null}" @click="if(isCollapsed !== null){isCollapsed = !isCollapsed;}">
              <slot name="title">{{title}}</slot>
              <a v-if="isCollapsed !== null && !isCollapsed" class="float-end text-secondary"><i class="fas fa-chevron-up"/></a>
              <a v-if="isCollapsed !== null && isCollapsed" class="float-end text-secondary"><i class="fas fa-chevron-down"/></a>
            </h2>
            <div v-if="!isCollapsed && !loading" class="card-content">
              <slot/>
            </div>
            <div v-if="loading" class="card-content placeholder-glow placeholder-card-content">
              <div class="row">
                <div class="col placeholder me-1" />
                <div class="col placeholder" />
              </div>
              <div class="row mt-4">
                <div class="col placeholder" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ref, watch, getCurrentInstance } from 'vue'
import SmartTimestamps from '@/components/SmartTimestamps'

export default {
  setup: function(props){
    const isCollapsed = ref(props.collapsed)
    const isSidebarHidden = ref(false)
    const internalInstance = getCurrentInstance()

    //for some reason useRoute doesnt work in a bundled component
    const route = internalInstance.appContext.config.globalProperties.$route

    //todo: add an identifier to remember state?
    const storageName = 'sb-'+(route && route.name ? route.name : null)+'-'+props.title+props.header

    if(props.rememberState){
      if(props.collapsed !== null){
        if(localStorage.getItem(storageName+'-isCollapsed')){
          isCollapsed.value = localStorage.getItem(storageName+'-isCollapsed') === 'collapsed'
        }
      }
    }

    //isSidebarHidden.value = localStorage.getItem('sb-isSidebarHidden') === 'hidden'
    isSidebarHidden.value = false

    watch(props, () => {
      isCollapsed.value = props.collapsed
    })

    watch(isCollapsed, () => {
      if(props.rememberState){
        localStorage.setItem(storageName+'-isCollapsed', isCollapsed.value ? 'collapsed' : null)
      }
    })

    watch(isSidebarHidden, () => {
      localStorage.setItem('sb-isSidebarHidden', isSidebarHidden.value ? 'hidden' : null)
    })

    return {isCollapsed, isSidebarHidden}
  },
  props: {
    primary: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    collapsed: {
      type: Boolean,
      default: null
    },
    title: {
      type: String,
      default: ''
    },
    header: {
      type: String,
      default: ''
    },
    rememberState: {
      type: Boolean,
      default: true
    },
    sidebar: {
      type: Boolean,
      default: false
    },
    timestamps: {
      type: Object,
      default: null
    },
  },
  components: {SmartTimestamps},
}
</script>
