import {
  AlignLayer, EditorState,
  LayerRegistry,
  PlaygroundLayer,
  // RulerLayer,
  SelectorBoxLayer,
  SelectorLayer,
  SnaplineLayer,
  ToolbarLayer
} from './layer';
import { Dragable, Resizable } from './able';
import { AbleRegistry, ConfigEntity, EntityRegistry } from '../common';
import { SelectableEntity } from './entity';
import {
  PlaygroundConfigEntity,
  // RulerConfigEntity,
  SelectorBoxConfigEntity,
  SnaplineConfigEntity,
  ToolbarConfigEntity,
  EditorStateConfigEntity,
} from './layer/config';
import { Selectable } from './able/selectable';

export const PlaygroundConfig = Symbol('PlaygroundConfig');

/**
 * 画布配置
 */
export interface PlaygroundConfig {
  layers?: LayerRegistry[]
  ables?: AbleRegistry[]
  entities?: EntityRegistry[]
  editorStates?: EditorState[]
  width?: number // 画布的初始宽度
  height?: number // 画布的初始高度
  node?: HTMLElement
  autoFocus?: boolean // 自动focus及blur，默认true
  autoResize?: boolean // 监听变化
  zoomEnable?: boolean
  contextMenuPath?: string[] // 右键菜单路径
  contextMenuPathEditPath?: string[]; // 在编辑路径时的右键菜单路径
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  entityConfigs?: Map<EntityRegistry<ConfigEntity>, any>;
}

/**
 * 默认注册器
 */
export function createDefaultPlaygroundConfig(): PlaygroundConfig {
  return {
    autoFocus: true,
    autoResize: true,
    zoomEnable: true,
    layers: [
      PlaygroundLayer, // 基础配置
      // RulerLayer, // 标尺
      SelectorLayer, // 节点选择器
      SelectorBoxLayer, // 选择框
      SnaplineLayer, // 参考线
      AlignLayer, // 对齐线
      ToolbarLayer, // 工具条
    ],
    ables: [
      Dragable,
      Selectable,
      Resizable,
    ],
    entities: [
      SelectableEntity,
      SnaplineConfigEntity,
      PlaygroundConfigEntity,
      // RulerConfigEntity,
      ToolbarConfigEntity,
      SelectorBoxConfigEntity,
      EditorStateConfigEntity,
    ]
  };
}