import * as React from 'react';
import './App.css';
// import { DragSource } from './dnd'
import ResizeSource from './resize/resizeSource'

import logo from './logo.svg';

// const createRef = React.createRef;

interface IProps {
  resizeSouth?: any,
  resizeNotrh?: any,
  isResizing?: boolean,
  dir?: string,
  text?: string
}

const resizeCollect = (connect: any, monitor: any) => ({
  resizeNotrh: connect.resizeNorth(),
  resizeSouth: connect.resizeSouth(),
  isResizing: monitor.isResizing()
})

const resizeSpec = {
  beginResize(props: IProps, monitor: any) {
    console.log('gogogo forward')
    return {
      text: props.text
    };
  },
  endResize(props: IProps, monitor:any){
    const dir = monitor.getDirection()

    console.log(49, dir)
  }
}

// @DragSource('block', spec, collect)
@ResizeSource('resize', resizeSpec, resizeCollect)
class App extends React.Component<IProps> {
  public render() {
    const {resizeNotrh, resizeSouth} = this.props;

    return (<div>
    {
      resizeSouth(
        <div className="App2">
          <header className="App-header" >
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.tsx</code> and save to reload.
          </p>
        </div>
      )
    }
    </div>);
  }
}

export default App;