<template>
  <div v-if="topButtonsPassed" class="flex flex-row gap-2 empty:contents">
    <slot name="topButtons"></slot>
  </div>
  <div
    v-if="showTopList"
    class="w-full h-fit max-h-1/2 flex flex-col divide-y-2 divide-gray-300 bg-white rounded-lg justify-center overflow-hidden"
  >
    <div v-if="topSearchPassed" class="flex flex-row gap-1 justify-end items-center pt-5 pb-3 px-7">
      <slot name="searchTop"></slot>
    </div>
    <div class="flex flex-col gap-2 grow overflow-hidden" :class="topTitlePassed ? 'pb-5 pt-2' : ' py-5'">
      <p v-if="topTitlePassed" class="px-2">{{ topTitle }}</p>
      <div class="flex flex-col gap-2 h-full px-7 overflow-y-auto">
        <slot name="topList"></slot>
      </div>
    </div>
  </div>
  <div class="w-full grow flex flex-col divide-y-2 divide-gray-300 bg-white rounded-lg justify-center overflow-hidden">
    <div v-if="searchPassed" class="flex flex-row gap-1 justify-end items-center pt-5 pb-3 px-7">
      <slot name="search"></slot>
    </div>
    <div class="flex flex-col gap-2 grow overflow-hidden" :class="titlePassed ? 'pb-5 pt-2' : ' py-5'">
      <p v-if="titlePassed" class="px-2">{{ mainTitle }}</p>
      <div class="flex flex-col gap-2 h-full px-7 overflow-y-auto">
        <slot name="list"></slot>
      </div>
    </div>
  </div>
  <div v-if="bottomButtonsPassed" class="flex flex-col gap-2 empty:contents">
    <slot name="bottomButtons"></slot>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    topTitle: {
      type: String,
      default: null,
    },
    mainTitle: {
      type: String,
      default: null,
    },
    showTopList: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    defaultRoute() {
      return ((this.$route?.name as string) ?? "").includes("-default");
    },
    topButtonsPassed() {
      return !!this.$slots.topButtons;
    },
    topTitlePassed() {
      return !!this.topTitle;
    },
    topSearchPassed() {
      return !!this.$slots.searchTop;
    },
    titlePassed() {
      return !!this.mainTitle;
    },
    searchPassed() {
      return !!this.$slots.search;
    },
    bottomButtonsPassed() {
      return !!this.$slots.bottomButtons;
    },
  },
};
</script>
