import React, { Component } from 'react';
import styles from '../../index.less';

export default class AntdDraggableDiv extends Component {
  constructor(props) {
    super(props);
    this.state = {
      translateX: 0,
      translateY: 0,
    };
    this.moving = false;
    this.lastX = null;
    this.lastY = null;
    window.onmouseup = e => this.onMouseUp(e);
    window.onmousemove = e => this.onMouseMove(e);
  }
  onMouseDown(e) {
    e.stopPropagation();
    this.moving = true;
  }

  onMouseUp() {
    this.moving = false;
    this.lastX = null;
    this.lastY = null;
  }

  onMouseMove(e) {
    if (this.moving) {
      this.onMove(e);
    }
  }

  onMove(e) {
    if (this.lastX && this.lastY) {
      const dx = e.clientX - this.lastX;
      const dy = e.clientY - this.lastY;
      this.setState({ translateX: this.state.translateX + dx, translateY: this.state.translateY + dy });
    }
    this.lastX = e.clientX;
    this.lastY = e.clientY;
  }
  render() {
    const { children, draggableDivClassName } = this.props;
    return (
      <div
        className={draggableDivClassName}
        onMouseDown={e => this.onMouseDown(e)}
        style={{ transform: `translateX(${this.state.translateX}px)translateY(${this.state.translateY}px)` }}
      >
        {children}
        <div className={styles.antModal} />
      </div>
    );
  }
}