/**
 * 页面头部组件
 * User: bjyangxiuwu
 * Date: 2018/12/17
 * Time: 16:23
 */

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { push } from 'react-router-redux';
import { Breadcrumb } from 'neatui';
import { Link } from 'react-router-dom';
import './pageTitle.scss';

class PageTitle extends React.PureComponent {
    static displayName = 'PageTitle';

    static defaultProps = {};

    constructor(props, context) {
        super(props, context);
        this.state = {};
    }

    render() {
        const mine = this;
        let location = window.location.pathname;
        location = location.split('?').length > 0 ? location.split('?')[0] : location;
        const pathSnippets = location.split('/').filter(i => i);
        const titles = [];
        let currRoute = null;
        const extraBreadcrumbItems = pathSnippets.map((_, index) => {
            const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
            currRoute = mine.props.routeTable.filter(item => item.path === url);
            currRoute = currRoute[0] ? currRoute[0] : null;
            titles.push(currRoute.title);
            return (
                <Breadcrumb.Item key={url}>
                    { currRoute.component ? <Link to={url}>
                        {currRoute.title}
                    </Link> : currRoute.title
                    }
                </Breadcrumb.Item>
            );
        });

        // const breadcrumbItems = [(
        //    <Breadcrumb.Item key="home">
        //        <Link to="/">首页</Link>
        //    </Breadcrumb.Item>
        // )].concat(extraBreadcrumbItems);

        return (
            <div className="page-title">
                <Breadcrumb>
                    {extraBreadcrumbItems}
                </Breadcrumb>

                <div>
                    <h1 className="page-header-index-title">{currRoute.title}</h1>
                    {currRoute.altTitle ? <currRoute.altTitle /> : null}
                </div>
            </div>
        );
    }
}

export default connect(
    state => ({
        routing: state.routing
    }),
    dispatch =>
        bindActionCreators(
            {
                pushHistory: push
            },
            dispatch
        )
)(PageTitle);