<template>
  <div
    class="base-flow-node large-box-shadow"
    :class="[`base-flow-node--${nodeType}`, { 'is-selected': selected, 'is-invalid': invalid }]"
  >
    <span v-if="number" class="base-flow-node__number">{{ number }}</span>
    <div class="base-flow-node__header">
      <div class="base-flow-node__title-wrap">
        <div
          class="flex h-[24px] w-[24px] items-center justify-center rounded-[var(--border-radius-small)]"
          :style="`background-color: ${props.icon.backgroundColor}`"
        >
          <CrmIcon :type="props.icon.type" :size="16" class="text-[var(--text-n10)]" />
        </div>
        <CrmTag v-if="priorityLabel" customClass="h-[24px] px-[4px]" type="primary" theme="light">
          {{ priorityLabel }}
        </CrmTag>
        <CrmEditableText
          v-if="props.titleEditable"
          size="small"
          :value="name"
          :permission="props.editPermission"
          click-to-edit
          :emptyTextTip="t('common.notNull', { value: t('process.process.flow.nodeName') })"
          @handle-edit="handleTitleEdit"
        >
          <n-tooltip trigger="hover" :delay="300" :disabled="!name">
            <template #trigger>
              <div
                class="base-flow-node__title one-line-text"
                :class="`${props.titleEditable ? 'title-editable' : ''}`"
              >
                {{ name ?? '-' }}
              </div>
            </template>
            {{ name ?? '-' }}
          </n-tooltip>
        </CrmEditableText>

        <n-tooltip v-else trigger="hover" :delay="300" :disabled="!name">
          <template #trigger>
            <span class="base-flow-node__title one-line-text">{{ name }}</span>
          </template>
          {{ name ?? '-' }}
        </n-tooltip>
      </div>
      <div class="base-flow-node__header-extra">
        <n-tooltip v-if="deletable" :delay="300" trigger="hover">
          <template #trigger>
            <CrmIcon
              type="iconicon_close"
              :size="16"
              class="base-flow-node__delete-icon cursor-pointer text-[var(--text-n4)] hover:text-[var(--primary-8)]"
              @click="handleDelete"
            />
          </template>
          <span> {{ t('crmFlow.deleteNode') }} </span>
        </n-tooltip>
      </div>
    </div>
    <FlowNodeDescription
      v-if="props.nodeType !== 'end' && props.showContent"
      :description="description"
      :items="descriptionItems"
    />
  </div>
</template>

<script setup lang="ts">
  import { NTooltip } from 'naive-ui';

  import { useI18n } from '@lib/shared/hooks/useI18n';

  import CrmIcon from '@/components/pure/crm-icon-font/index.vue';
  import CrmTag from '@/components/pure/crm-tag/index.vue';
  import CrmEditableText from '@/components/business/crm-editable-text/index.vue';
  import FlowNodeDescription from './flowNodeDescription.vue';

  import type { FlowNodeDescriptionItem } from '../../types';

  defineOptions({
    name: 'BaseFlowNode',
  });

  const props = withDefaults(
    defineProps<{
      name: string;
      number?: string;
      description?: string;
      descriptionItems?: FlowNodeDescriptionItem[];
      priorityLabel?: string;
      nodeType?: string;
      selected?: boolean;
      invalid?: boolean;
      deletable?: boolean;
      showContent?: boolean;
      titleEditable?: boolean;
      editPermission?: string[];
      icon: {
        type: string;
        backgroundColor: string;
      };
    }>(),
    {
      number: '',
      description: '',
      priorityLabel: '',
      descriptionItems: () => [],
      nodeType: 'action',
      selected: false,
      invalid: false,
      deletable: false,
      showContent: true,
      titleEditable: false,
      editPermission: () => [],
    }
  );

  const emit = defineEmits<{
    (event: 'delete'): void;
    (event: 'titleEdit', value: string, done?: () => void): void;
  }>();

  const { t } = useI18n();

  function handleDelete() {
    emit('delete');
  }

  function handleTitleEdit(value: string, done?: () => void) {
    emit('titleEdit', value, done);
  }
</script>

<style scoped lang="less">
  .base-flow-node {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--text-n10);
    transition: border-color 0.2s ease;
    &:hover {
      border: 1px solid var(--primary-1);
    }
    &.is-selected {
      border-color: var(--primary-0);
    }
    &.is-invalid {
      border-color: var(--error-red);
    }
  }
  .base-flow-node__number {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 12px;
    line-height: 12px;
    color: var(--text-n7);
  }
  .base-flow-node__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .base-flow-node__header-extra {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .base-flow-node__title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    flex: 1;
    :deep(.crm-editable-text-view),
    :deep(.crm-editable-text-input-wrap) {
      flex: 1;
    }
    :deep(.crm-editable-text-input-wrap .n-input__input-el) {
      height: 24px;
      line-height: 24px;
    }
    :deep(.table-row-edit) {
      @apply invisible;
    }
    &:hover {
      :deep(.table-row-edit) {
        color: var(--primary-8);
        @apply visible;
      }
    }
  }
  .base-flow-node__title {
    height: 24px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-n1);
    &.title-editable {
      border-bottom: 2px solid var(--text-n6);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
</style>
