import { Layer } from './layer';
import { domUtils } from '@gedit/utils/lib/browser';
import { EditorState, EditorStateConfigEntity, PathPointSelectionEntity, PlaygroundConfigEntity, SelectorBoxConfigEntity } from './config';
import { entity } from '../../common';
import { SelectPayload } from '../able/selectable';
import { PlaygroundDrag } from '../utils/playground-drag';
import { PipelineLayerPriority } from '../pipeline';
import { PathSelectMode } from '../';

/**
 * 选择框的实现
 */
export class SelectorBoxLayer extends Layer {
  @entity(PlaygroundConfigEntity) protected playgroundConfigEntity: PlaygroundConfigEntity;
  @entity(SelectorBoxConfigEntity) protected selectorBoxConfigEntity: SelectorBoxConfigEntity;
  @entity(EditorStateConfigEntity) protected editorStateConfig: EditorStateConfigEntity;
  @entity(PathPointSelectionEntity) protected pathPointSelection: PathPointSelectionEntity;
  readonly node = domUtils.createDivWithClass('gedit-selector-box-layer');
  /**
   * 选择框
   */
  protected selectorBox = this.createDOMCache('gedit-selector-box');
  /**
   * 拖动选择框
   */
  protected selectboxDragger = new PlaygroundDrag({
    onDragStart: e => this.selectorBoxConfigEntity.setDragInfo(e),
    onDrag: e => {

      this.selectorBoxConfigEntity.setDragInfo(e);
      if (this.editorStateConfig.getCurrentState() === EditorState.EDIT_PATH_STATE) {
        // path select 模式在 path-edit-layer 中实现, 览听 config 变化
        return;
      }
      // 发送选中消息
      this.dispatch<SelectPayload>(SelectPayload, {
        fromMouse: true,
        selectBounds: this.selectorBoxConfigEntity.toRectangle(this.playgroundConfigEntity.finalScale),
        selectionService: this.selectionService,
      });
    },
    onDragEnd: e => this.selectorBoxConfigEntity.setDragInfo(e)
  });
  onReady(): void {
    this.listenPlaygroundEvent('mousedown', (down: MouseEvent): void => {
      if (this.isEnabled()) {
        this.selectboxDragger.start(down.clientX, down.clientY, this.config);
      }
    }, PipelineLayerPriority.BASE_LAYER);
  }
  isEnabled(): boolean {
    const currentState = this.editorStateConfig.getCurrentState();
    // 如果是路径编辑态，且没选中点时，选择框可用；
    const isPathPointSelect = this.pathPointSelection?.selectMode !== PathSelectMode.ADD_PATH;
    return (
      ((currentState === EditorState.EDIT_PATH_STATE && isPathPointSelect) ||
        currentState === EditorState.STATE_SELECT) &&
      !this.selectorBoxConfigEntity.disabled
    );
  }
  /**
   * Destroy
   */
  dispose(): void {
    this.selectorBox.dispose();
    super.dispose();
  }
  protected updateSelectorBox(selector: SelectorBoxConfigEntity): void {
    const node = this.selectorBox.get();
    // 非可用状态且在moving则关闭选择框
    if (!this.isEnabled() && selector.isMoving) {
      this.selectorBoxConfigEntity.collapse();
    }
    if (!this.isEnabled() || !selector.isMoving) {
      node.setStyle({
        display: 'none'
      });
    } else {
      node.setStyle({
        display: 'block',
        left: selector.position.x,
        top: selector.position.y,
        width: selector.size.width,
        height: selector.size.height
      });
    }
  }
  draw(): void {
    this.updateSelectorBox(this.selectorBoxConfigEntity);
  }
}