<script setup lang="ts">
import { type MapAreaInfo, MapAreaType, type MapPen, MapPointType } 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>>;
  current?: string;
};
const props = defineProps<Props>();
const editor = inject(props.token)!;

const pen = computed<MapPen | undefined>(() => editor.value.getPenById(props.current));
const area = computed<MapAreaInfo | null>(() => {
  const v = pen.value?.area;
  if (!v?.type) return null;
  return v;
});

const icon = computed<string>(() => `area${area.value?.type}-detail`);

const bindAction = computed<string>(
  () =>
    area.value?.points
      ?.map((v) => editor.value.getPenById(v))
      .filter((v) => v?.point?.type === MapPointType.动作点)
      .map((v) => v?.label)
      .filter((v) => !!v)
      .join('、') ?? '',
);
const bindPoint = computed<string>(
  () =>
    area.value?.points
      ?.map((v) => editor.value.getPenById(v)?.label)
      .filter((v) => !!v)
      .join('、') ?? '',
);
const bindRoute = computed<string>(
  () =>
    area.value?.routes
      ?.map((v) => editor.value.getRouteLabel(v))
      .filter((v) => !!v)
      .join('、') ?? '',
);
</script>

<template>
  <a-card :bordered="false">
    <template v-if="pen && area">
      <a-row :gutter="[8, 8]">
        <a-col :span="24">
          <a-flex align="center" :gap="8">
            <i class="icon" :class="icon" />
            <a-typography-text class="card-title" style="flex: auto" :content="pen.label" ellipsis />
            <a-tag :bordered="false">{{ $t(MapAreaType[area.type]) }}</a-tag>
          </a-flex>
        </a-col>

        <a-col :span="24">
          <a-typography-text code>{{ pen.desc || $t('暂无描述') }}</a-typography-text>
        </a-col>
      </a-row>

      <a-list class="block mt-16">
        <a-list-item v-if="MapAreaType.库区 === area.type">
          <a-flex :gap="8" vertical>
            <a-typography-text type="secondary">{{ $t('绑定动作点') }}</a-typography-text>
            <a-typography-text>{{ bindAction || $t('暂无') }}</a-typography-text>
          </a-flex>
        </a-list-item>
        <a-list-item v-if="[MapAreaType.互斥区, MapAreaType.非互斥区].includes(area.type)">
          <a-flex :gap="8" vertical>
            <a-typography-text type="secondary">{{ $t('绑定站点') }}</a-typography-text>
            <a-typography-text>{{ bindPoint || $t('暂无') }}</a-typography-text>
          </a-flex>
        </a-list-item>
        <a-list-item v-if="MapAreaType.互斥区 === area.type">
          <a-flex :gap="8" vertical>
            <a-typography-text type="secondary">{{ $t('绑定路段') }}</a-typography-text>
            <a-typography-text>{{ bindRoute || $t('暂无') }}</a-typography-text>
          </a-flex>
        </a-list-item>
      </a-list>
    </template>
    <a-empty v-else :image="sTheme.empty" />
  </a-card>
</template>
