<template lang="pug">
  .flex.flex-col.gap-y-2
    .font-semibold.text-sm.opacity-40(
      v-if="label",
      :class="labelClass"
    ) {{ label }}
    .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.relative(
      ref="select",
      @click="open = !open",
      :class="{'open': open, 'border-none': borderNone}",
    )
      input.w-full.outline-0.not-italic(
        :placeholder="placeholder",
        v-model="value.label",
      )
      .flex.items-center
        span.icon-down-arrow.open-icon.flex.text-xsm(:class="{'open': open }")
      base-options(v-if="open")
        .items-container.mt-1(
          @click="closeOptions",
          v-click-outside="leaveSelect",
          :class="textClass"
        )
          .empty-window.py-2.px-4(v-if="items.length === 0") Ничего не найдено
          .item.py-2.px-4.cursor-pointer(
            v-else
            v-for="item in items",
            :key="item?.id",
            :class="{'center': center}",
            @click="clickItem(item?.id, item?.label)"
          ) {{ item?.label }}
</template>

<script>
import BaseOptions from "@/components/base/BaseOptions.vue";
import BaseInput from "@/components/base/BaseInput.vue";

export default {
  name: "BaseSearchSelect",
  components: { BaseOptions, BaseInput },
  props: {
    placeholder: String,
    items: {
      type: Array,
      default: () => [],
    },
    label: String,
    modelValue: Object,
    center: Boolean,
    borderNone: Boolean,
    textStyle: String,
    labelStyle: String,
  },
  data() {
    return {
      open: false,
      filteredItems: [],
    };
  },
  emits: ["update:modelValue"],
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
    textClass() {
      return this.textStyle
        ? {
            [this.textStyle]: true,
          }
        : {
            "text-base": true,
          };
    },
    labelClass() {
      return this.labelStyle
        ? {
            [this.labelStyle]: true,
          }
        : {
            "text-sm": true,
          };
    },
  },
  methods: {
    clickItem(id, label) {
      this.value = {
        id: id,
        label: label,
      };
    },
    leaveSelect() {
      this.open = false;
    },
    closeOptions(e) {
      e.stopPropagation();
      this.open = false;
    },
  },
};
</script>

<style scoped lang="sass">
.base-select
  width: 100%
  border: 1.5px solid var(--border-light-grey-color)
  border-radius: 4px
  background-color: white
  user-select: none
  height: 40px
  &.open
    border: 1.5px solid var(--btn-blue-color)
.items-container
  box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
  border-radius: 4px
  background-color: white
  max-height: 142px
  overflow-y: auto
.placeholder
  color: var(--font-black-color)
  opacity: 0.4
  text-overflow: ellipsis
  overflow: hidden
.item
  border-bottom: 0.5px solid var(--border-light-grey-color)
  color: var(--font-black-color)
  &:hover
   background-color: rgba(215, 217, 255, 0.25)
  &:last-child
    border-bottom: none
.open-icon
  &.open
    transform: rotate(180deg)
.border-none
  border: none
.center
  display: flex
  justify-content: center
.empty-window
  color: var(--font-black-color)
  pointer-events: none
</style>
