<template>
  <div
    :class="[
      'panel-wrapper',
      'panel-right',
      localShow ? 'showme' : '',
      $slots.footerButton ? 'panel-have-footer' : '',
      wide ? 'panel-wide' : '',
      full ? 'panel-full' : ''
    ]">
    <div class="panel-header">
      <h3>{{ panelTitle }}</h3>
      <span class="panel-close panel-close-btn" @click="closePanel"></span>
    </div>
    <div class="panel-content">
      <slot name="panelContent"></slot>
    </div>
    <div class="panel-footer" v-if="$slots.footerButton">
      <slot name="footerButton"></slot>
      <button class="button-c button-cancel panel-close" @click="closePanel">
        Vazgeç
      </button>
    </div>
  </div>
  <div :class="['menu-side-shadow', localShow ? 'showme' : '']" @click="closePanel"></div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useGlobalStore } from '@/stores/globalStore'

  interface Props {
    panelTitle: string
    modelValue: boolean
    wide?: boolean
    full?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    wide: false,
    full: false
  })

  const emit = defineEmits(['update:modelValue'])
  const globalStore = useGlobalStore()
  const localShow = ref<Boolean>(false)

  const closePanel = () => {
    localShow.value = false
    setTimeout(() => {
      emit('update:modelValue', false)
    }, globalStore.animateTime)
  }

  onMounted(() => {
    setTimeout(() => {
      localShow.value = props.modelValue
    }, 10)
  })
</script>
