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

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

const label = computed<string>(() => editor.value.getRouteLabel(pen.value?.id));
</script>

<template>
  <a-card :bordered="false">
    <template v-if="pen && route">
      <a-row :gutter="[8, 8]">
        <a-col :span="24">
          <a-flex align="center" :gap="8">
            <i class="icon route" />
            <a-typography-text class="card-title" style="flex: auto" :content="label" ellipsis />
            <a-tag :bordered="false">{{ $t(MapRoutePassType[route.pass ?? MapRoutePassType.无]) }}</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>
          <a-typography-text type="secondary">{{ $t('路段类型') }}</a-typography-text>
          <a-typography-text>{{ $t(MAP_ROUTE_TYPE[route.type]) }}</a-typography-text>
        </a-list-item>
        <a-list-item>
          <a-typography-text type="secondary">{{ $t('路段长度') }}</a-typography-text>
          <a-typography-text>{{ pen.length?.toFixed() }}</a-typography-text>
        </a-list-item>
        <a-list-item>
          <a-typography-text style="flex: none" type="secondary">{{ $t('路段方向') }}</a-typography-text>
          <a-typography-text :content="label" ellipsis />
        </a-list-item>
      </a-list>
    </template>
    <a-empty v-else :image="sTheme.empty" />
  </a-card>
</template>
