import * as React from 'react';
import {
  ResizeType,
  SelectControlKey,
  SelectDisplayType,
  SelectAllControlKeys,
} from '../../able';
import { PlaygroundConfigEntity /* SCALE_WIDTH */ } from '../config';
import { Rectangle } from '@gedit/math';
import clx from 'clsx';
import {
  SelectorBounds,
  SelectorBoundsFullProps,
  SelectorBoundsProps,
} from './selector-bounds';

export type ResizeTypeKey = keyof typeof ResizeType;

export interface SelectorControllerProps {
  playgroundConfigEntity: PlaygroundConfigEntity;
  isMoving: boolean;
  selectControlKeys: SelectControlKey[];
  bounds: Rectangle; // 边框
  rotate: number;
  visible?: boolean;
  boundsProps?: SelectorBoundsProps;
  multiple: boolean;
  focused: boolean;
  onControlClick: (key: string, e: React.MouseEvent) => void;
  scaleVisible: boolean; // 标尺是否隐藏
  displayType: SelectDisplayType;
}

/**
 * 多选时候的外围边框
 * @param props
 * @constructor
 */
export function SelectorMultipleRenderer(
  props: SelectorControllerProps
): React.JSX.Element {
  const { bounds, visible = true } = props;
  if (!visible) {
    return <></>;
  }
  // const config = props.playgroundConfigEntity.config;
  const scale = props.playgroundConfigEntity.finalScale;
  // 移动时候不显示控制按钮
  const childNodes =
    props.isMoving && !props.multiple
      ? []
      : SelectAllControlKeys
      // 多选模式不显示原点
        .filter(k => props.selectControlKeys.includes(k) && k !== 'origin')
        .map(key => {
          const onControlMouseDown = (e: React.MouseEvent) => {
            props.onControlClick(key, e);
          };
          return (
            <div
              key={key}
              className={`gedit-selector-control ${key}`}
              onMouseDown={onControlMouseDown}
            ></div>
          );
        });
  // const rulerXStyle = {
  //   left: bounds.x * scale || 0,
  //   top: (config.scrollY - SCALE_WIDTH) || 0,
  //   width: bounds.width * scale || 0,
  //   height: SCALE_WIDTH,
  //   opacity: props.focused ? 0.3 : 0.1,
  //   display: props.scaleVisible ? 'block' : 'none'
  // };
  // const rulerYStyle = {
  //   left: (config.scrollX - SCALE_WIDTH) || 0,
  //   top: (bounds.y * scale) || 0,
  //   width: SCALE_WIDTH,
  //   height: bounds.height * scale || 0,
  //   opacity: props.focused ? 0.3 : 0.1,
  //   display: props.scaleVisible ? 'block' : 'none'
  // };
  const className = clx('gedit-selector-node', {
    multiple: props.multiple,
    selected: true,
    focused: props.focused,
    [props.boundsProps && props.boundsProps.className
      ? props.boundsProps.className
      : '']: true,
  });
  const boundsProps: SelectorBoundsFullProps = {
    ...props.boundsProps,
    displayType: props.displayType,
    bounds: bounds,
    focused: props.focused,
    rotate: props.rotate,
    scale,
    className,
  };
  return (
    <React.Fragment>
      {/* <div className="gedit-selector-ruler x" style={rulerXStyle}/>
      <div className="gedit-selector-ruler y" style={rulerYStyle}/> */}
      {props.multiple ? (
        <SelectorBounds {...boundsProps}>{childNodes}</SelectorBounds>
      ) : undefined}
    </React.Fragment>
  );
}