'use strict';
import React from 'react';
import { connect } from 'react-redux';
import { Nav } from '@douyinfe/semi-ui';

const Header = props => {
    const { dispatch, history, user, actions } = props

    return (
        <div style={{ position: 'relative', height: 60, minWidth: 520 }}>
            <div style={{ float: 'left', paddingLeft: 32, fontSize: 16 }}>
                <div style={{
                    lineHeight: '60px', display: 'inline-block', fontSize: 20, textShadow: '0 4px 3px rgba(0, 0, 0, 0.2)',
                    userSelect: 'none'
                }}>
                    飞尚物联
                </div>
            </div>
            <div id="nav" style={{ float: 'right' }}>
                <Nav mode={'horizontal'} onClick={({ itemKey }) => {
                    if (itemKey == 'logout') {
                        dispatch(actions.auth.logout(user));
                        history.push(`/signin`);
                    }
                }}>
                    <Nav.Sub itemKey={'user'} text={<div style={{ display: 'inline-block' }}>{user.displayName}</div>}>
                        <Nav.Item itemKey={'logout'} text={'退出'} />
                    </Nav.Sub>
                </Nav>
            </div>
        </div>
    )
};

function mapStateToProps (state) {
    const { global, auth } = state;
    return {
        actions: global.actions,
        user: auth.user
    };
}

export default connect(mapStateToProps)(Header);