<template>
  <div class="accordion-sheet" :class="{ active }">
    <template v-if="isMobile">
      <BottomSheet
        :class="{ stretch: props.stretch }"
        :active="props.active"
        v-show="props.active"
        @close="$emit('close')"
      >
        <transition name="list-transition" appear>
          <slot />
        </transition>
      </BottomSheet>
    </template>
    <div v-else class="dropdown" :class="{ direction }">
      <AccordionWrapper :active="props.active" @nospace="setDirection">
        <ScrollWrapper ref="scroll" class="hide-rail shrink-rail">
          <div class="list">
            <transition name="list-transition" appear>
              <slot />
            </transition>
          </div>
        </ScrollWrapper>
      </AccordionWrapper>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeUnmount, onMounted, ref, watch } from "vue";
export default defineComponent({
  props: {
    active: {
      type: Boolean,
      required: true,
      default: false,
    },
    stretch: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const isMobile = ref<boolean>(false);
    const direction = ref<boolean>(false); // false - down, true - up
    const scroll = ref<any>(null);

    const setDirection = (dr: boolean): void => {
      direction.value = dr;
    };

    onMounted((): void => {
      resizeListener();
      window.addEventListener("resize", resizeListener);
    });

    onBeforeUnmount((): void => {
      window.removeEventListener("resize", resizeListener);
    });

    const resizeListener = (): void => {
      isMobile.value = window.innerWidth <= 768;
    };

    watch(
      (): boolean => props.active,
      (newVal: boolean): void => {
        if (!isMobile.value && newVal) {
          direction.value = false;
        }
      }
    );

    return {
      isMobile,
      props,
      direction,
      setDirection,
      scroll,
    };
  },
});
</script>
<style lang="scss">
.accordion-sheet {
  --scroll-min-height: auto;
  --scroll-max-height: auto;
  position: relative;

  &.active {
    .dropdown {
      z-index: 5;
    }
  }

  .dropdown {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    overflow: hidden;
    background-color: var(--background);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: var(--form-border-radius);
    min-width: var(--accordion-min-width);

    .accordion-wrapper {
      .scroll-wrapper {
        min-height: var(--scroll-min-height);
        max-height: var(--scroll-max-height);

        :deep(.scrollbar-track-y) {
          right: 8px !important;
          left: auto !important;

          .scrollbar-thumb {
            background-color: #c4c4c4 !important;
          }
        }
      }
    }

    &.direction {
      bottom: var(--form-item-height);
      top: auto;
    }
  }
}
</style>

<style lang="scss">
.accordion-sheet {
  .bottom-sheet {
    &.stretch {
      .wrapper {
        height: calc(100vh - 90px);
        max-height: initial;
      }
    }
  }
}
</style>
