<template>
  <VueFinalModal
    :modal-id="modalId"
    class="sidebar"
    content-class="sidebar__content"
    content-transition="sidebar"
    hide-overlay
    background="interactive"
    :click-to-close="false"
    :z-index-fn="({ index }) => 6000 + 2 * index"
  >
    <div class="sidebar__top">
      <UiButton icon="arrow-left" type="outlined" color="secondary" @click="vfm.close(modalId)" />

      <slot name="top" />
    </div>

    <div v-if="$slots.default" class="sidebar__middle">
      <slot />
    </div>

    <div v-if="$slots.bottom" class="sidebar__bottom">
      <slot name="bottom" />
    </div>
  </VueFinalModal>
</template>

<script setup>
import { VueFinalModal, useVfm } from 'vue-final-modal'

const props = defineProps({
  id: {
    type: String,
  },
})

const vfm = useVfm()

const modalId = computed(() => {
  if (props.id)
    return `sidebar-${props.id}`

  return 'sidebar'
})
</script>

<style lang="scss">
.sidebar {
  &__content {
    width: 353px;
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    background-color: $clr-white;
    height: 100%;
    gap: 32px;
    padding: 16px;
  }

  &__top {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  &__middle {
    flex: 1;
    overflow-y: auto;
  }

  &-enter-active,
  &-leave-active {
    transition: transform .2s ease-in-out;
  }

  &-enter-to,
  &-leave-from {
    //transform: rotateZ(360deg);
  }

  &-enter-from,
  &-leave-to {
    transform: translateX(100%);
  }
}
</style>
