import React from 'react'
import { Layout, Input, Button, Icon } from 'antd'
import { connect } from 'dva'
import DashboardCollection from './collection'
import DashboardMenu from '../dashboard/menu'
import Loading from '../common/loading/index'
import './sider.less'

const { Header, Content } = Layout

class MenuLayout extends React.Component {

    onSearch = (value) => {
        const { dashboard, dispatch } = this.props;
        const expandedKeys = this.findExpandedKeys(dashboard.menuTree, {code: '-1'}, value);
        dispatch({ type: 'home/setFields', fields: [
            { name: 'menuExpandedKeys', value: expandedKeys },
            { name: 'menuFilterLabel', value },
            { name: 'menuAutoExpandParent', value: true },
        ] });
    }

    findExpandedKeys = (tree, parent, filterLabel) => {
        let result = [];
        if(tree && tree.length > 0) {
            tree.forEach(t => {
                if(t.name.toLowerCase().indexOf(filterLabel.toLowerCase()) > -1 && result.indexOf(parent.code) === -1) {
                    result.push(parent.code);
                }
                result = result.concat(this.findExpandedKeys(t.children, t, filterLabel));
            });
        }
        return result;
    }

    render() {
        const { home, dispatch,dashboard } = this.props;
        const { siderLoading, menuFilterLabel, collectionDashboards } = home;

        return <Layout className='home-menu'>
            <Loading visible={siderLoading}/>
            <Header>
                <Input.Search
                    className='search'
                    placeholder='搜索'
                    //onSearch={this.onSearch}
                    value={menuFilterLabel}
                    onChange={(e) => {
                        const expandedKeys = this.findExpandedKeys(dashboard.menuTree, {code: '-1'}, e.target.value);
                        dispatch({ type: 'home/setFields', fields: [
                            { name: 'menuExpandedKeys', value: expandedKeys },
                            { name: 'menuFilterLabel', value: e.target.value },
                            { name: 'menuAutoExpandParent', value: true },
                        ] });
                    }}
                />
                <Button className='refresh' onClick={() => {
                    dispatch({ type: 'home/setFields', fields: [
                        { name: 'siderLoading', value: true },
                        { name: 'menuFilterLabel', value: '' },
                        { name: 'menuAutoExpandParent', value: false },
                    ] });
                    dispatch({ type: 'dashboard/remoteMenuTree', mandatory: true, silent: true });
                    dispatch({ type: 'home/fetchCollectionDashboardList', mandatory: true, silent: true }).then(() => {
                        dispatch({ type: 'home/setFields', fields: [
                            { name: 'siderLoading', value: false },
                        ] });
                    });
                }}><Icon type='sync' /></Button>
            </Header>
            <Content>
                <DashboardCollection />
                <DashboardMenu
                    model={home}
                    editable={false}
                    searchMenu={false}
                    onlyMenu={false}
                    hideHeader={true}
                    hideEmptyMenu={true}
                    onExpand={menus => {
                        dispatch({ type: 'home/setFields', fields: [
                            { name: 'menuExpandedKeys', value: menus.map(m => m.code) },
                            { name: 'menuAutoExpandParent', value: false },
                        ] });
                    }}
                    onSelect={selectedMenu => {
                        // dispatch({ type: 'home/setField', name: 'menuSelectedKeys', value: selectedKeys })
                        if(selectedMenu && selectedMenu.type === 'dashboard') {
                            dispatch({ type: 'home/openTab', tab: {
                                code: selectedMenu.code,
                                name: selectedMenu.name
                            } })
                        }
                    }}
                    extraTools={{
                        render: (menuItem) => {return menuItem.type === 'dashboard' ? <Icon type="star" theme={collectionDashboards.findIndex(c => c.code === menuItem.code) > -1 ? 'filled': ''} style={{ color: '#F2B91D', cursor: 'pointer', marginTop: '5px' }} onClick={(e) => {
                            e.stopPropagation()
                            if(collectionDashboards.findIndex(c => c.code === menuItem.code) > -1) {
                                dispatch({ type: 'home/uncollect', data: menuItem });
                            }else {
                                dispatch({ type: 'home/collect', data: menuItem });
                            }
                        }}/> : null}
                    }}
                />
            </Content>
        </Layout>;
    }
}

export default connect(({ home, dashboard }) => ({ home, dashboard }))(MenuLayout)