<script setup>

import { ref, useTemplateRef, onMounted } from 'vue';
import { onSwipe } from '../gestures.js';

defineProps({
  showOpenAction: {
    type: Boolean,
    default: true
  },
});

const sideBar = useTemplateRef('sideBar');
const isVisible = ref(false);

function open() {
  isVisible.value = true;
}

function close() {
  isVisible.value = false;
}

onMounted(() => {
  onSwipe(sideBar.value, (direction) => {
    if (direction === 'left') close();
  });
});

defineExpose({ open, close });

</script>

<template>
  <div class="pankow-sidebar-container" :class="{ 'pankow-sidebar-open': isVisible }">
    <Transition name="pankow-fade">
      <div class="pankow-sidebar-backdrop" @click="close"></div>
    </Transition>
    <div class="pankow-sidebar" ref="sideBar" :class="{ 'pankow-sidebar-closed': !isVisible }">
      <Transition name="pankow-scale">
        <div class="pankow-sidebar-close-action" v-if="isVisible" @click="close()"><i class="fa-solid fa-xmark"></i></div>
        <div class="pankow-sidebar-open-action" v-else-if="showOpenAction" @click="open()"><i class="fa-solid fa-bars"></i></div>
      </Transition>
      <div class="pankow-sidebar-inner">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style>

.pankow-sidebar-container {
  display: block;
  height: 100%;
  min-width: 220px;
}

.pankow-sidebar {
  display: block;
  height: 100%;
  overflow: auto;
}

.pankow-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pankow-sidebar-open-action {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  font-size: 24px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--pankow-color-dark);
}

.pankow-sidebar-close-action {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  font-size: 32px;
  padding: 8px 20px;
  cursor: pointer;
}

.pankow-sidebar-backdrop {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000aa;
}

@media (max-width: 576px) {
  .pankow-sidebar-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    min-width: 0;
    height: 100%;
    z-index: 2000;
  }

  .pankow-sidebar-open {
    width: 100%;
  }

  .pankow-sidebar {
    position: absolute;
    width: calc(70%);
    left: 0;
    transition: left 250ms ease-in-out;
  }

  .pankow-sidebar-open .pankow-sidebar-backdrop {
    display: block;
  }

  .pankow-sidebar-closed {
    position: fixed;
    left: -600px;  /* depends on media query */
  }

  .pankow-sidebar-open-action {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
  }

  .pankow-sidebar-close-action {
    display: block;
  }
}

</style>