var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import HTML5Backend from 'react-dnd-html5-backend';
import React from 'react';
import ReactDOM from 'react-dom';
import Table from '..';
import classnames from 'classnames';
import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
const { SelectionRow } = Table;
let dragingIndex = -1;
function MyRow(props) {
    const { isDragging, isOver, connectDragSource, connectDropTarget, moveRow, // eslint-disable-line
    className } = props, others = __rest(props, ["isDragging", "isOver", "connectDragSource", "connectDropTarget", "moveRow", "className"]);
    const opacity = isDragging ? 0 : 1;
    const style = Object.assign(Object.assign({}, others.style), { cursor: 'move' });
    const cls = classnames({
        [className]: className,
        'drop-over-upward': isOver && others.index < dragingIndex,
        'drop-over-downward': isOver && others.index > dragingIndex,
    });
    return (React.createElement(SelectionRow, Object.assign({}, others, { style: Object.assign(Object.assign({}, style), { opacity }), className: cls, wrapper: row => connectDragSource(connectDropTarget(row)) })));
}
const NewRow = DropTarget('row', {
    drop(props, monitor) {
        const dragIndex = monitor.getItem().index;
        const hoverIndex = props.index;
        if (dragIndex === hoverIndex) {
            return;
        }
        props.moveRow(dragIndex, hoverIndex);
        monitor.getItem().index = hoverIndex;
    },
}, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
}))(DragSource('row', {
    beginDrag: (props) => {
        dragingIndex = props.index;
        return {
            id: props.record[props.primaryKey],
            index: props.rowIndex,
        };
    },
}, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
}))(MyRow));
class InnerTable extends React.Component {
    constructor(props) {
        super(props);
        this.moveRow = (dragIndex, hoverIndex) => {
            const { onSort } = this.props;
            const dragRow = this.state.dataSource[dragIndex];
            const dataSource = [...this.state.dataSource];
            dataSource.splice(dragIndex, 1);
            dataSource.splice(hoverIndex, 0, dragRow);
            this.setState({
                dataSource,
            });
            onSort && onSort(this.state.dataSource);
        };
        this.state = {
            dataSource: [...props.dataSource],
        };
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.dataSource &&
            JSON.stringify(nextProps.dataSource) !==
                JSON.stringify(this.state.dataSource)) {
            this.setState({ dataSource: [...nextProps.dataSource] });
        }
    }
    render() {
        const _a = this.props, { excludeProvider } = _a, restProps = __rest(_a, ["excludeProvider"]); // eslint-disable-line
        const tableProps = Object.assign(Object.assign({}, restProps), { dataSource: this.state.dataSource, rowProps: (props, index) => ({
                index,
                moveRow: this.moveRow,
            }), components: {
                Row: NewRow,
            } });
        return React.createElement(Table, Object.assign({}, tableProps));
    }
}
class SortableTable extends React.Component {
    render() {
        const ComponentName = DragDropContext(HTML5Backend)(InnerTable);
        return React.createElement(ComponentName, Object.assign({}, this.props));
    }
}
const result = [
    {
        id: '001',
        time: 1951,
        title: { name: 'The Old Man and the Sea' },
    },
    {
        id: '002',
        time: 1925,
        title: { name: 'the great gatsby' },
    },
    {
        id: '003',
        time: 1719,
        title: { name: 'The adventures of Robinson Crusoe' },
    },
];
class Demo extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            dataSource: result,
        };
        this.onRemove = id => {
            const { dataSource } = this.state;
            let index = -1;
            dataSource.forEach((item, i) => {
                if (item.id === id) {
                    index = i;
                }
            });
            if (index !== -1) {
                dataSource.splice(index, 1);
                this.setState({
                    dataSource,
                });
            }
        };
        this.renderOper = (value, index, record) => {
            return (React.createElement("a", { onClick: this.onRemove.bind(this, record.id) },
                "Remove(",
                record.id,
                ")"));
        };
    }
    render() {
        return (React.createElement("div", null,
            React.createElement(SortableTable, { dataSource: this.state.dataSource, onSort: console.log },
                React.createElement(Table.Column, { title: "Id", dataIndex: "id", width: 100, lock: true }),
                React.createElement(Table.Column, { title: "Title", dataIndex: "title.name", width: 400 }),
                React.createElement(Table.Column, { title: "Time", dataIndex: "time", width: 300 }),
                React.createElement(Table.Column, { title: "operate", cell: this.renderOper, width: 300, lock: "right" }))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('table-demo-27'));
