import React from 'react'
import { Icon, Modal } from 'antd'
import { connect } from 'dva'
import DashboardDesigner from '../dashboardDesigner/layout'
import './toolbar.less'

class Toolbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visibleFullscreenBox: false,
        }
    }
    // 全屏展示
    fullscreen = () => {
        this.setState({
            visibleFullscreenBox: true,
        });
    }
    // 刷新
    refresh = () => {
        this.props.dispatch({ type: 'dashboardDesigner/refresh' });
    }
    // 收藏
    collect = () => {
        const { dispatch, home } = this.props;
        const { selectedTab } = home;
        dispatch({ type: 'home/collect', data: selectedTab });
    }
    // 取消收藏
    uncollect = () => {
        const { dispatch, home } = this.props;
        const { selectedTab } = home;
        dispatch({ type: 'home/uncollect', data: selectedTab });
    }
    
    onFixed = (code) => {
        const { dispatch, home } = this.props;
        const { selectedTab } = home;
        dispatch({ type: 'home/onFixedDashboard', tab: selectedTab });
    }

    onCancelFixed = (code) => {
        const { dispatch, home } = this.props;
        const { selectedTab } = home;
        dispatch({ type: 'home/onCancelFixedDashboard', tab: selectedTab });
    }

    afterRefresh = () => {
        const { dispatch, home } = this.props;
        dispatch({ type: 'home/saveCurrentTabDashboardConfig', code: home.selectedTab.code });
    }
    render() {
        const { home } = this.props;
        const { tabs, selectedTab, collectionDashboards, fixedDashboard } = home;
        let { config } = tabs.find(t => t.code === selectedTab.code);
        return <div className='dashboardview-toolbar'>
            <div className='toos'>
                <div className='tool'><span onClick={this.fullscreen}><Icon type="fullscreen" />全屏</span></div>
                <div className='tool'><span onClick={this.refresh}><Icon type="sync" />刷新</span></div>
                <div className='tool'>{
                    collectionDashboards.findIndex(c => c.code === selectedTab.code) > -1 ? 
                        <span onClick={this.uncollect}><Icon type="star" theme="filled" />取消收藏</span> :
                        <span onClick={this.collect}><Icon type="star" />收藏</span>
                }</div>
                <div className='tool'>{
                    (!!fixedDashboard && fixedDashboard.code === selectedTab.code) ? 
                        <span onClick={this.onCancelFixed}><Icon type="star" theme="filled" />取消固定到首页</span> :
                        <span onClick={this.onFixed}><Icon type="star" />固定到首页</span>
                }</div>
            </div>
            {/** 全屏展示modal */}
            {this.state.visibleFullscreenBox && <Modal
                className='modal-full'
                width='100%'
                height='100%'
                visible={this.state.visibleFullscreenBox}
                footer={null}
                onCancel={() => {
                    this.setState({
                        visibleFullscreenBox: false
                    })
                }}
            >
                <DashboardDesigner
                    dashboardDesigner={this.props.dashboardDesigner}
                    code={selectedTab.code}
                    isViewMode
                    afterLoad={null}
                    afterRefresh={this.afterRefresh}
                    config={config}
                />
            </Modal>}
        </div>
    }
}

export default connect(({ present: { dashboardDesigner, home } }) => ({ dashboardDesigner, home }))(Toolbar)