import React from "react"
import "./viewLayout.less"
import ReactGridLayout from 'react-grid-layout'
import { Icon, Modal } from 'antd'
import { connect } from 'dva'
import ChartView from './chartView'

class ViewLayout extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            visiblePreviewBox: false
        };
    }

    createElement = (item, isPreview) => {
        const { dispatch, editMode } = this.props;
        const { code, name, viewType, layout, chartCode } = item;
        return (
            <div className={`chartview${editMode ? ' chartview-edit' : ''}`} key={code} data-grid={layout}>
                <div className='chartview-toolbar mover'>
                    <div className='chart-title'><span>{name}</span></div>
                    <div className='chart-tools'>
                        {!isPreview && viewType !== 'richText' && <Icon type="arrows-alt" onClick={() => this.showPreviewBox(item)}/>}
                        {editMode && viewType !== 'richText' &&  <Icon type='edit' onClick={() => {
                            dispatch({ type: 'dashboard/remoteModify' });
                            dispatch({ type: 'chartDesigner/reset' });
                            dispatch({ type: 'main/redirect', path: '/chart/' + chartCode });
                        }}/>}
                        {!isPreview && editMode && <Icon type='delete' onClick={() => {
                            dispatch({ type: 'dashboardDesigner/deleteItem', item });
                        }} />}
                        {isPreview && <Icon type="close" onClick={this.hidePreviewBox}/>}
                    </div>
                </div>
                <ChartView itemSize={{ width: '100%', height: isPreview ? '100%' : 50*layout.h }} editMode={isPreview ? false : editMode} item={{...item}}/>
            </div>
        )
    }

    onLayoutChange = (layout) => {
        const { dispatch, reset } = this.props;
        dispatch({ type: 'dashboardDesigner/changeLayout', layout });
        setTimeout(() => {
            reset();
        }, 500)
    }

    onResize = () => {
        const { reset, } = this.props;
        reset();
    }

    showPreviewBox = (item) => {
        this.setState({
            previewItem: item,
            visiblePreviewBox: true
        });
    }

    hidePreviewBox = () => {
        this.setState({
            visiblePreviewBox: false
        });
    }

    render() {
        const { dashboardDesigner, contentSize, editMode } = this.props;
        const { visiblePreviewBox, previewItem } = this.state;
        const children = dashboardDesigner.items.map((item) => this.createElement(item));
        return (<div>
            <ReactGridLayout
                width={contentSize.width}
                autoSize={true}
                cols={12}
                margin = {editMode ? [2, 2] : [0, 0]}
                rowHeight = {50}
                isDraggable={editMode}
                isResizable={editMode}
                draggableHandle='.mover'
                onLayoutChange={this.onLayoutChange}
                onResize={this.onResize}
                onBreakpointChange={this.onBreakpointChange}
                verticalCompact={true}
                compactType='vertical'
            >
                {children}
            </ReactGridLayout>
            <Modal
                className='previewbox'
                visible={visiblePreviewBox}
                onCancel={this.hidePreviewBox}
                footer={null}
                keyboard={true}
                maskClosable={true}
                >
                {previewItem && this.createElement(previewItem, true)}
            </Modal>
        </div>);
    }
}

export default connect(({ present: { dashboardDesigner } }) => ({ dashboardDesigner }))(ViewLayout);
