<script setup lang="ts">
import { MAP_POINT_TYPES, type MapPen, type MapPointInfo } from '@api/map';
import type { EditorService } from '@core/editor.service';
import sTheme from '@core/theme.service';
import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';

type Props = {
  token: InjectionKey<ShallowRef<EditorService>>;
};
const props = defineProps<Props>();
const editor = inject(props.token)!;

const pen = computed<MapPen | undefined>(() => editor.value.current.value);
const point = computed<MapPointInfo | null>(() => {
  const point = pen.value?.point;
  if (!point?.type) return null;
  return point;
});
</script>

<template>
  <a-card :title="$t('属性')" :bordered="false">
    <template v-if="pen && point">
      <a-row :gutter="8">
        <a-col :span="12">
          <a-select :value="point.type" @change="editor.changePointType(pen.id!, <number>$event)">
            <a-select-option v-for="[l, v] in MAP_POINT_TYPES" :key="v">{{ $t(l) }}</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="12">
          <a-input
            :maxlength="10"
            :value="pen.label"
            @change="editor.updatePen(pen.id!, { label: $event.target.value }, false)"
          >
            <template #suffix><EditOutlined /></template>
          </a-input>
        </a-col>
      </a-row>
    </template>
    <a-empty v-else :image="sTheme.empty" />
  </a-card>
</template>
