/* eslint-disable @typescript-eslint/no-explicit-any */
import * as React from 'react';
import { Rectangle } from '@gedit/math';
import { SelectDisplayType } from '../../able/selectable';

export interface SelectorBoundsProps {
  strokeWidth?: number; // 线条宽度
  padding?: number; // 选中的实体和边框之间的留白距离
  borderType?: string; // 线条类型 dashed || solid || others
  className?: string;
  style?: any;
}
export interface SelectorBoundsFullProps extends SelectorBoundsProps {
  bounds: Rectangle; // 边界的外围矩形
  rotate?: number; // 旋转角度
  scale?: number; // 分辨率
  children?: React.JSX.Element[] | React.JSX.Element;
  focused?: boolean;
  displayType: SelectDisplayType; // 选择框类型
  onDoubleClick?: (e: React.MouseEvent) => void;
}

export function SelectorBounds(props: SelectorBoundsFullProps): React.JSX.Element {
  const {
    scale = 1,
    rotate = 0,
    strokeWidth = 1,
    borderType = 'dashed',
  } = props;
  const padding =
    scale >= 1 ? props.padding || 0 : (props.padding || 0) * scale;
  const bounds = new Rectangle(
    props.bounds.x * scale - strokeWidth - padding,
    props.bounds.y * scale - strokeWidth - padding,
    props.bounds.width * scale + strokeWidth * 2 + padding * 2,
    props.bounds.height * scale + strokeWidth * 2 + padding * 2
  );
  const boundsRect = new Rectangle(0, 0, bounds.width, bounds.height);
  const { leftTop, rightTop, leftBottom } = boundsRect;
  const rotateClass = rotate ? 'gedit-selector-bounds-rotate' : '';
  const boundsStyle = {
    left: bounds.x || 0,
    top: bounds.y || 0,
    width: bounds.width || 0,
    height: bounds.height || 0,
    transform: rotate ? `rotate(${rotate}deg)` : undefined,
    borderWidth: strokeWidth,
    borderStyle: borderType as any,
    ...props.style,
  };
  const topStyle = {
    left: (leftTop.x - strokeWidth) || 0,
    top: (leftTop.y - strokeWidth) || 0,
    width: bounds.width || 0,
    height: strokeWidth!,
    borderTopWidth: strokeWidth,
    borderTopStyle: borderType as any,
  };
  const rightStyle = {
    left: (rightTop.x - strokeWidth * 2) || 0,
    top: rightTop.y || 0,
    width: strokeWidth,
    height: (bounds.height - strokeWidth) || 0,
    borderRightWidth: strokeWidth,
    borderRightStyle: borderType as any,
  };
  const bottomStyle = {
    left: leftBottom.x || 0,
    top: (leftBottom.y - strokeWidth * 2) || 0,
    width: (bounds.width - strokeWidth) || 0,
    height: strokeWidth!,
    borderBottomWidth: strokeWidth,
    borderBottomStyle: borderType as any,
  };
  const leftStyle = {
    left: (leftTop.x - strokeWidth) || 0,
    top: (leftTop.y - strokeWidth) || 0,
    width: strokeWidth,
    height: bounds.height || 0,
    borderLeftWidth: strokeWidth,
    borderLeftStyle: borderType as any,
  };
  return (
    <div
      className={`gedit-selector-bounds ${rotateClass} ${props.displayType} ${
        props.className || ''
      }`}
      style={boundsStyle}
      onDoubleClick={props.onDoubleClick}
    >
      <div className="gedit-selector-bound top" style={topStyle} />
      <div className="gedit-selector-bound right" style={rightStyle} />
      <div className="gedit-selector-bound bottom" style={bottomStyle} />
      <div className="gedit-selector-bound left" style={leftStyle} />
      {props.children}
    </div>
  );
}