<template>
  <section class="wt-dual-panel">
    <div v-if="!hideHeader" class="wt-dual-panel__header">
      <slot name="header" />
    </div>
    <div v-if="actionsPanel" class="wt-dual-panel__actions-panel">
      <slot name="actions-panel" />
    </div>
    <div class="wt-dual-panel__content">
      <div :class="[`wt-dual-panel__side-panel--${sidePanelSize}`]" class="wt-dual-panel__side-panel">
        <wt-icon-action
v-if="!disableResize" :action="sidePanelCollapsed ? IconAction.EXPAND : IconAction.COLLAPSE"
          class="wt-dual-panel__icon-action" size="sm" @click="toggleSidePanel" />
        <slot v-if="!sidePanelCollapsed" name="side-panel" />
      </div>
      <div class="wt-dual-panel__main">
        <slot name="main" />
      </div>
    </div>
  </section>
</template>

<script setup>
import { computed, defineEmits, ref } from 'vue';

import { ComponentSize, IconAction } from '../../enums';

const props = defineProps({
	hideHeader: {
		type: Boolean,
		default: false,
	},
	actionsPanel: {
		type: Boolean,
		default: true,
	},
	disableResize: {
		type: Boolean,
		default: false,
	},
});

const emit = defineEmits([
	'update:side-panel-size',
]);

const sidePanelCollapsed = ref(false);

const toggleSidePanel = () => {
	sidePanelCollapsed.value = !sidePanelCollapsed.value;
	emit('update:side-panel-size', sidePanelSize.value);
};

const sidePanelSize = computed(() =>
	sidePanelCollapsed.value ? ComponentSize.SM : ComponentSize.MD,
);
</script>

<style scoped>
.wt-dual-panel {
  --side-panel-md-width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--wt-dual-panel-section-gap);
  box-sizing: border-box;
  background: var(--wt-dual-panel-background-color);
  padding: var(--wt-dual-panel-padding);
  max-width: 100%;
  height: 100%;
}

.wt-dual-panel__header,
.wt-dual-panel__actions-panel,
.wt-dual-panel__main {
  box-sizing: border-box;
  border-radius: var(--border-radius);
  background: var(--wt-dual-panel-content-wrapper-color);
  padding: var(--wt-dual-panel-section-padding);
}

.wt-dual-panel__main {
  flex: 1 1 auto;
  overflow-x: auto;
}

.wt-dual-panel__header,
.wt-dual-panel__actions-panel {
  flex: 0 0 auto;
}

.wt-dual-panel__content {
  display: flex;
  flex-grow: 1;
  gap: var(--spacing-sm);
  min-height: 0;
}

.wt-dual-panel__side-panel {
  display: flex;
  flex-direction: column;
  gap: var(--wt-dual-panel-section-gap);
  transition: var(--transition);
  will-change: width;
  background: var(--wt-dual-panel-content-wrapper-color);
  padding: var(--wt-dual-panel-section-padding);
  min-width: 0;
  /* overflow: auto; */
}

.wt-dual-panel__side-panel--md {
  flex: 0 0 var(--side-panel-md-width);
}

.wt-dual-panel__side-panel--sm {
  flex: 0 0 min-content;
}

.wt-dual-panel__icon-action {
  width: fit-content;
  line-height: 0;
}
</style>
