/**
 * Created by baoyinghai on 5/26/17.
 */
import React from 'react';
import SettingButton from '../components/Button/SettingButton';
import CancelButton from '../components/Button/CancelButton';
import ResizeButton from '../components/Button/ResizeButton';
import { BIT } from '../constant';
import { popModal, popConfirm } from '../util';
import { calculateStyle, createShadow } from './common';
import { isOccupy } from '../components/DashBoard/board';
import Setting from '../components/Setting';

export default Comp => {

  class Setable extends React.Component {

    popSettingModal = e => {
      e.stopPropagation();
      const title = this.props.title;
      const settingProps = this.props.setting;
      const body = props => {
        return (
          <Setting {...settingProps} title={this.props.title} chartSetting={this.props.chartSetting} index={this.props.index} updateSetting={this.props.updateSetting} onClick={props.callback} createBottomButtons={props.createBottomButtons} dataSource={this.props.dataSource} />
        );
      };
      popModal(title, body);
    };

    removeCard = e => {
      e.stopPropagation();
      popConfirm('确定删除吗？', () => {
        const { removeCard } = this.props;
        removeCard && removeCard(this.props.index);
      }, () => {});
    };

    addBodyClass = () => {
      const body = document.querySelector('body');
      this.cursor = body.style.cursor;
      body.style.cursor = 'se-resize';
    };

    removeBodyClass = () => {
      const body = document.querySelector('body');
      body.style.cursor = this.cursor;
    };

    render() {
      const { layout, updateLayout, index, calculateHitBitBeside, refStr } = this.props;
      const style = calculateStyle(layout);
      const event = {
        onMouseDown: e => {
          e.stopPropagation();
          this.addBodyClass();
          const hitArr = calculateHitBitBeside(index);
          const startClientX = e.clientX;
          const startClientY = e.clientY;
          const wrapper = document.querySelector('.' + refStr + '.move-container');
          const cloneWrapper = createShadow(style);
          wrapper.parentNode.appendChild(cloneWrapper);
          cloneWrapper.style.zIndex = 100;
          let offsetWidth = 0;
          let offsetHeight = 0;
          const mouseMoveHandler = moveEvent => {
            moveEvent.stopPropagation();
            offsetWidth = Math.floor((moveEvent.clientX - startClientX) / BIT);
            offsetHeight = Math.floor((moveEvent.clientY - startClientY) / BIT);
            cloneWrapper.style.width = offsetWidth * BIT + style.width + 'px';
            cloneWrapper.style.height = offsetHeight * BIT + style.height + 'px';
          };
          const mouseUpHandler = upEvent => {
            upEvent.stopPropagation();
            this.removeBodyClass();
            // wrapper.style.zIndex = 0;
            wrapper.parentNode.removeChild(cloneWrapper);
            window.removeEventListener('mousemove', mouseMoveHandler);
            window.removeEventListener('mouseup', mouseUpHandler);
            const width = Math.max(layout.width + offsetWidth, 1);
            const height = Math.max(layout.height + offsetHeight, 1);
            if (!isOccupy(layout.x, layout.y, width, height, hitArr)) {
              updateLayout(index, {...layout, width, height});
            }
          };
          window.addEventListener('mousemove', mouseMoveHandler);
          window.addEventListener('mouseup', mouseUpHandler);
        }
      };
      return (
        <div className="setting-container">
          <div className="setting-bar">
            <SettingButton onMouseDown={this.popSettingModal} />
            <CancelButton onMouseDown={this.removeCard} />
          </div>
          {this.props.exception ? (<span className="load-data-exception">数据加载异常</span>) : (<Comp {...this.props} />)}
          <ResizeButton {...event} />
        </div>
      )
    }
  };

  return Setable;
};