import { ReactVisualEditorComponent } from './ReactVisualEditor.utils';
import styles from './ReactVisualEditor.less';
import classNames from 'classnames';
export enum ReactVisualBlockResizeDirection {
  start = 'start',
  center = 'center',
  end = 'end',
}

export const ReactVisualBlockResize: React.FC<{
  component: ReactVisualEditorComponent;
  onMouseDown?: (
    e: React.MouseEvent<HTMLDivElement>,
    direction: {
      horizontal: ReactVisualBlockResizeDirection;
      vertical: ReactVisualBlockResizeDirection;
    },
  ) => void;
}> = (props) => {
  const render: JSX.Element[] = [];

  const onMouseDown = (
    e: React.MouseEvent<HTMLDivElement>,
    direction: {
      horizontal: ReactVisualBlockResizeDirection;
      vertical: ReactVisualBlockResizeDirection;
    },
  ) => {
    !!props.onMouseDown && props.onMouseDown(e, direction);
  };

  if (props.component.resize!.height) {
    render.push(
      <div
        className={classNames(styles.reactVisualBlockResize, styles.reactVisualBlockResizeTop)}
        key="top"
        onMouseDown={(e) =>
          onMouseDown(e, {
            horizontal: ReactVisualBlockResizeDirection.center,
            vertical: ReactVisualBlockResizeDirection.start,
          })
        }
      />,
    );
    render.push(
      <div
        className={classNames(styles.reactVisualBlockResize, styles.reactVisualBlockResizeBottom)}
        key="bottom"
        onMouseDown={(e) =>
          onMouseDown(e, {
            horizontal: ReactVisualBlockResizeDirection.center,
            vertical: ReactVisualBlockResizeDirection.end,
          })
        }
      />,
    );
  }
  if (props.component.resize!.width) {
    render.push(
      <div
        className={classNames(styles.reactVisualBlockResize, styles.reactVisualBlockResizeLeft)}
        key="left"
        onMouseDown={(e) =>
          onMouseDown(e, {
            horizontal: ReactVisualBlockResizeDirection.start,
            vertical: ReactVisualBlockResizeDirection.center,
          })
        }
      />,
    );
    render.push(
      <div
        className={classNames(styles.reactVisualBlockResize, styles.reactVisualBlockResizeRight)}
        key="right"
        onMouseDown={(e) =>
          onMouseDown(e, {
            horizontal: ReactVisualBlockResizeDirection.end,
            vertical: ReactVisualBlockResizeDirection.center,
          })
        }
      />,
    );
  }
  if (props.component.resize!.width && props.component.resize!.height) {
    render.push(
      <div
        className={classNames(styles.reactVisualBlockResize, styles.reactVisualBlockResizeTopLeft)}
        key="top-left"
        onMouseDown={(e) =>
          onMouseDown(e, {
            horizontal: ReactVisualBlockResizeDirection.start,
            vertical: ReactVisualBlockResizeDirection.start,
          })
        }
      />,
    );
    render.push(
      <div
        className={classNames(styles.reactVisualBlockResize, styles.reactVisualBlockResizeTopRight)}
        key="top-right"
        onMouseDown={(e) =>
          onMouseDown(e, {
            horizontal: ReactVisualBlockResizeDirection.end,
            vertical: ReactVisualBlockResizeDirection.start,
          })
        }
      />,
    );
    render.push(
      <div
        className={classNames(
          styles.reactVisualBlockResize,
          styles.reactVisualBlockResizeBottomLeft,
        )}
        key="bottom-left"
        onMouseDown={(e) =>
          onMouseDown(e, {
            horizontal: ReactVisualBlockResizeDirection.start,
            vertical: ReactVisualBlockResizeDirection.end,
          })
        }
      />,
    );
    render.push(
      <div
        className={classNames(
          styles.reactVisualBlockResize,
          styles.reactVisualBlockResizeBottomRight,
        )}
        key="bottom-right"
        onMouseDown={(e) =>
          onMouseDown(e, {
            horizontal: ReactVisualBlockResizeDirection.end,
            vertical: ReactVisualBlockResizeDirection.end,
          })
        }
      />,
    );
  }
  return <>{render}</>;
};