<template>
  <div
    class="bms-sliding-panel-shell"
    :class="[
      `bms-sliding-panel-shell--${align}`,
      `bms-sliding-panel-shell--${mode}`,
    ]"
    :style="{ '--bms-panel-width': panelWidth }"
  >
    <BmsSidePanel :align="align" :collapsed="collapsed" :width="panelWidth">
      <slot />
    </BmsSidePanel>

    <Transition v-if="mode === 'overlay'" :name="`bms-slide-${align}`">
      <div v-if="showFloatingPanel" class="bms-sliding-panel-shell__drawer">
        <slot name="floating" />
      </div>
    </Transition>

    <div
      v-else
      class="bms-sliding-panel-shell__push-wrapper"
      :class="{
        'bms-sliding-panel-shell__push-wrapper--open': showFloatingPanel,
      }"
    >
      <div class="bms-sliding-panel-shell__drawer">
        <slot name="floating" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch } from 'vue';
import BmsSidePanel from './BmsSidePanel.vue';

const props = withDefaults(
  defineProps<{
    align?: 'left' | 'right';
    collapsed?: boolean;
    showFloatingPanel?: boolean;
    panelWidth?: string;
    mode?: 'overlay' | 'push';
  }>(),
  {
    align: 'left',
    collapsed: false,
    showFloatingPanel: false,
    panelWidth: '300px',
    mode: 'overlay',
  },
);

const emit = defineEmits<{
  'update:showFloatingPanel': [value: boolean];
}>();

watch(
  () => props.collapsed,
  (collapsed) => {
    if (collapsed && props.showFloatingPanel) {
      emit('update:showFloatingPanel', false);
    }
  },
);
</script>

<style lang="scss" scoped>
.bms-sliding-panel-shell {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: visible;

  // Overlay mode: side panel above the drawer
  &--overlay {
    :deep(.bms-side-panel) {
      position: relative;
      z-index: 2;
    }

    .bms-sliding-panel-shell__drawer {
      position: absolute;
      top: 0;
      width: var(--bms-panel-width);
      height: 100%;
      background: var(--bms-white);
      z-index: 1;
      overflow-y: auto;
    }
  }

  &--overlay.bms-sliding-panel-shell--left .bms-sliding-panel-shell__drawer {
    left: var(--bms-panel-width);
    border-right: 1px solid var(--bms-border-color);
  }

  &--overlay.bms-sliding-panel-shell--right .bms-sliding-panel-shell__drawer {
    right: var(--bms-panel-width);
    border-left: 1px solid var(--bms-border-color);
  }

  // Push mode: drawer is in the flex flow and pushes adjacent content
  &__push-wrapper {
    width: 0;
    overflow: hidden;
    flex-shrink: 0;
    transition: width 200ms ease;

    &--open {
      width: var(--bms-panel-width);
    }
  }

  &--push.bms-sliding-panel-shell--right &__push-wrapper {
    order: -1;
  }

  &--push .bms-sliding-panel-shell__drawer {
    width: var(--bms-panel-width);
    height: 100%;
    background: var(--bms-white);
    overflow-y: auto;
  }

  &--push.bms-sliding-panel-shell--left .bms-sliding-panel-shell__drawer {
    border-right: 1px solid var(--bms-border-color);
  }

  &--push.bms-sliding-panel-shell--right .bms-sliding-panel-shell__drawer {
    border-left: 1px solid var(--bms-border-color);
  }
}

.bms-slide-left-enter-active,
.bms-slide-left-leave-active,
.bms-slide-right-enter-active,
.bms-slide-right-leave-active {
  transition: transform 200ms ease;
}

.bms-slide-left-enter-from,
.bms-slide-left-leave-to {
  transform: translateX(-100%);
}

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