<template>
  <SplitterPanel
    collapsible
    :collapsed-size="0"
    ref="splitterPanelRef"
    style="min-height: 32px"
    v-bind="$attrs"
  >
    <template #default="{ isExpanded, collapse, expand }">
      <div class="w-full h-full flex flex-col">
        <!-- header -->
        <div
          class="h-32px bg-bg-secondary flex items-center justify-between px-1 cursor-pointer border-b-1px border-b-solid border-border"
          @click="isExpanded ? collapse() : expand()"
        >
          <div class="left flex items-center">
            <span class="mr-8px text-text-primary">
              <ai-outline-down :size="12" v-if="isExpanded" />
              <ai-outline-right :size="12" v-else />
            </span>
            <span class="text-text-primary font-bold">{{ title }}</span>
          </div>
          <div class="right">
            <slot name="header-right"></slot>
          </div>
        </div>
        <!-- content -->
        <div class="flex-1 overflow-y-auto" v-show="isExpanded">
          <slot></slot>
        </div>
      </div>
    </template>
  </SplitterPanel>
  <SplitterResizeHandle
    class="splitter-handle"
    :class="direction === 'vertical' ? 'h-2px' : 'w-2px'"
  />
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { AiOutlineRight, AiOutlineDown } from 'vue-icons-plus/ai'
import { SplitterPanel, SplitterResizeHandle } from 'reka-ui'

withDefaults(
  defineProps<{
    title: string
  }>(),
  {}
)

const emit = defineEmits(['change'])
const direction = inject('direction')
</script>

<style scoped></style>
