<template>
  <div class="custom-select-wrapper" ref="wrapperRef">
    <div 
      class="custom-select" 
      :class="{ 'is-open': isOpen, 'is-disabled': disabled }"
      @click.stop="toggleDropdown"
    >
      <span class="select-text">{{ displayText }}</span>
      <svg 
        class="select-arrow" 
        :class="{ 'is-open': isOpen }" 
        width="12" 
        height="8" 
        viewBox="0 0 12 8" 
        fill="none"
      >
        <path 
          d="M1 1L6 6L11 1" 
          stroke="#C0C4CC" 
          stroke-width="1.5" 
          stroke-linecap="round" 
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <div class="custom-options" v-show="isOpen">
      <div 
        v-for="option in options" 
        :key="option.value"
        class="custom-option" 
        :class="{ 'is-selected': value === option.value }"
        @click.stop="selectOption(option.value)"
      >
        {{ option.label }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
import { CustomSelectProps, CustomSelectEmits, type SelectOption } from './CustomSelect';

const props = defineProps(CustomSelectProps);
const emit = defineEmits(CustomSelectEmits);

const isOpen = ref(false);
const wrapperRef = ref<HTMLElement | null>(null);

const displayText = computed(() => {
  const selectedOption = props.options.find(option => option.value === props.value);
  return selectedOption ? selectedOption.label : props.placeholder;
});

const toggleDropdown = () => {
  if (props.disabled) return;
  isOpen.value = !isOpen.value;
};

const selectOption = (value: string | number) => {
  // Vue2 compatible: emit 'input' event for v-model
  emit('input', value);
  emit('change', value);
  isOpen.value = false;
};

// Close dropdown when clicking outside
const handleClickOutside = (event: MouseEvent) => {
  if (!wrapperRef.value) return;
  
  const target = event.target as HTMLElement;
  // Check if click is outside the wrapper element
  if (!wrapperRef.value.contains(target)) {
    isOpen.value = false;
  }
};

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

<style lang="scss" scoped>
.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select {
  height: 36px;
  padding: 0 32px 0 12px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  background: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;

  &:hover:not(.is-disabled) {
    border-color: #C0C4CC;
  }

  &.is-open {
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }

  &.is-disabled {
    background: #F5F7FA;
    color: #C0C4CC;
    cursor: not-allowed;
    border-color: #E4E7ED;
  }
}

.select-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: transform 0.3s;

  &.is-open {
    transform: translateY(-50%) rotate(180deg);
  }
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-top: 4px;
  overflow: hidden;
  max-height: 200px;
  overflow-y: auto;
}

.custom-option {
  padding: 8px 12px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background: #F5F7FA;
    color: #409EFF;
  }

  &.is-selected {
    color: #409EFF;
    font-weight: 500;

    &:hover {
      background: #F5F7FA;
      color: #409EFF;
    }
  }
}

// Scrollbar styling for options
.custom-options::-webkit-scrollbar {
  width: 6px;
}

.custom-options::-webkit-scrollbar-track {
  background: #F1F1F1;
  border-radius: 3px;
}

.custom-options::-webkit-scrollbar-thumb {
  background: #C0C4CC;
  border-radius: 3px;

  &:hover {
    background: #A8ABB2;
  }
}
</style>