import * as React from 'react';
import { entity } from '../../common';
import { Layer } from './layer';
import {
  EditorState,
  EditorStateConfigEntity,
  PlaygroundConfigEntity,
  ToolbarConfigEntity,
} from './config';
import { domUtils } from '@gedit/utils/lib/browser';
import clx from 'clsx';
import { isOSX } from '@gedit/utils';

/**
 * 工具条绘制
 */
export class ToolbarLayer extends Layer {
  readonly node = domUtils.createDivWithClass('gedit-toolbar-layer');
  @entity(PlaygroundConfigEntity)
  protected playgroundConfigEntity: PlaygroundConfigEntity;
  @entity(ToolbarConfigEntity) protected toolbarConfig: ToolbarConfigEntity;
  @entity(EditorStateConfigEntity)
  protected editorStateConfig: EditorStateConfigEntity;
  get currentState(): EditorState | undefined {
    return this.editorStateConfig.getCurrentState();
  }
  onReady(): void {
    this.pipelineNode.parentNode?.appendChild(this.node);
  }
  draw(): React.JSX.Element {
    const toolbar = this.toolbarConfig.config;
    // const percentageInfoVisible = toolbar.percentageInfoVisible;
    const states = this.editorStateConfig
      .getStateGroups()
      .map(c =>
        c.filter(
          s =>
            !(typeof s.hidden === 'function' ? s.hidden(this.config) : s.hidden)
        )
      )
      .filter(c => c.length);

    const selectedState = this.editorStateConfig.getCurrentState();
    const style: React.CSSProperties = {
      display: toolbar.visible ? 'block' : 'none',
    };
    const onSelect = (state: EditorState, e: React.MouseEvent) => {
      if (
        typeof state.disabled === 'function'
          ? state.disabled(this.config)
          : state.disabled
      )
        return;
      this.editorStateConfig.changeState(state.id, e);
      e.stopPropagation();
      e.preventDefault();
    };
    return (
      <>
        {/* percentageInfoVisible ? <div className="gedit-toolbar-percentage-info">{Math.round(this.config.config.zoom * 100)}%</div> : undefined */}
        <div className="gedit-toolbar" style={style}>
          {/* <div className="gedit-toolbar-dragger">
          <i className="gedit-toolbar-icon"/>
        </div> */}
          <div className="gedit-toobar-content">
            {states.map((state, index) => {
              const children = state.map(c => {
                const className = clx('gedit-toolbar-item', {
                  'gedit-toolbar-item-pointer': c.cancelMode !== 'text',
                  disabled:
                    typeof c.disabled === 'function'
                      ? c.disabled(this.config)
                      : c.disabled,
                  selected: selectedState && selectedState.id === c.id,
                });
                const ctr = (c.ctr && (isOSX ? '⌘+' : 'Ctrl+')) || '';
                const title =
                  (c.title || '') +
                  (c.shortcut
                    ? `(${ctr}${c.shortcut === 'SPACE' ? '空格' : c.shortcut})`
                    : '');

                return (
                  <div
                    className={className}
                    title={c.showTitle ? undefined : title}
                    key={c.id}
                    onMouseDown={
                      c.cancelMode !== 'text' ? e => onSelect(c, e) : undefined
                    }
                  >
                    {c.icon && <i className={`gedit-toolbar-icon ${c.icon}`} />}
                    {c.showTitle && c.title && (
                      <div className="gedit-toolbar-title">
                        {typeof c.title === 'string'
                          ? c.title
                          : c.title(this.config)}
                      </div>
                    )}
                  </div>
                );
              });

              return (
                <div className="gedit-toolbar-group" key={index.toString()}>
                  {children}
                </div>
              );
            })}
          </div>
        </div>
      </>
    );
  }
}