<template>
  <a-dropdown :popup-visible="visible" @update:popup-visible="handleClose">
    <slot></slot>
    <template #content>
      <a-doption
        :class="{ 'selected-option': selectedType === 'default' }"
        @click="handleSelect('default')"
      >
        <template #icon>
          <icon-minus />
        </template>
        <div class="option-content">
          <div class="option-title">默认曲线</div>
          <div class="option-subtitle">贝塞尔曲线,平滑自然</div>
        </div>
      </a-doption>
      <a-doption
        :class="{ 'selected-option': selectedType === 'straight' }"
        @click="handleSelect('straight')"
      >
        <template #icon>
          <icon-arrow-right />
        </template>
        <div class="option-content">
          <div class="option-title">直线</div>
          <div class="option-subtitle">直接连接,简洁明了</div>
        </div>
      </a-doption>
      <a-doption
        :class="{ 'selected-option': selectedType === 'step' }"
        @click="handleSelect('step')"
      >
        <template #icon>
          <icon-minus />
        </template>
        <div class="option-content">
          <div class="option-title">阶梯线</div>
          <div class="option-subtitle">直角转折,类似线路图</div>
        </div>
      </a-doption>
      <a-doption
        :class="{ 'selected-option': selectedType === 'smoothstep' }"
        @click="handleSelect('smoothstep')"
      >
        <template #icon>
          <icon-arrow-up />
        </template>
        <div class="option-content">
          <div class="option-title">平滑阶梯线</div>
          <div class="option-subtitle">圆角转折,平滑过渡</div>
        </div>
      </a-doption>
      <a-doption
        :class="{ 'selected-option': selectedType === 'simplebezier' }"
        @click="handleSelect('simplebezier')"
      >
        <template #icon>
          <icon-minus style="transform: scaleY(0.8);" />
        </template>
        <div class="option-content">
          <div class="option-title">简单贝塞尔曲线</div>
          <div class="option-subtitle">轻微弯曲,柔和过渡</div>
        </div>
      </a-doption>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
import { IconMinus, IconArrowRight, IconArrowUp } from '@arco-design/web-vue/es/icon';
import type { EdgeType } from '../types';

interface Props {
  visible: boolean;
  selectedType: EdgeType;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
  (e: 'selectType', type: EdgeType): void;
}

defineProps<Props>();
const emit = defineEmits<Emits>();

const handleSelect = (type: EdgeType) => {
  emit('selectType', type);
  emit('update:visible', false);
};

const handleClose = (value: boolean) => {
  emit('update:visible', value);
};
</script>

<style scoped lang="less">
.selected-option {
  background-color: var(--color-primary-light-1);
}

.option-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.option-title {
  font-size: 14px;
  color: var(--color-text-1);
}

.option-subtitle {
  font-size: 12px;
  color: var(--color-text-3);
}
</style>
