"use strict";
import React from "react";
import { connect } from "react-redux";
import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";
import "./index.less";

const Header = (props) => {
    const { dispatch, history, user, actions, socket ,headerItems,tochange} = props;

    return (
        <>
        <div id="top-slider">
            <Nav
                mode={"horizontal"}
                onClick={({ itemKey }) => {
                    if (itemKey == "logout") {
                        dispatch(actions.auth.logout(user));
                        if (socket) {
                            socket.disconnect();
                        }
                        history.push(`/signin`);
                    }
                }}
                style={{
                    height: 60,
                    minWidth: 520,
                    background: '#1D2343',
                    backgroundSize: "100% 100%",
                    color: "white",
                }}
                header={{
                    logo: (
                        <img
                            src="/assets/images/background/logo.png"
                            style={{ display: "inline-block", width: 280, height: 52 }}
                        />
                    ),
                    text: "",
                }}
                footer={
                    <>
                    {headerItems.map((item,index)=>{
                        if(item.hasOwnProperty('items')){
                            return(
                                <Nav.Sub
                                key={index+'a'}
                                itemKey={item.itemKey}
                                text={item.text}
                                dropdownStyle={{color:'#F2F3F5'}}
                                >
                                    {item.hasOwnProperty('items')&&item.items.map((ite,idx)=>(
                                        <Nav.Item key={idx+'d'} itemKey={ite.itemKey} text={ite.text} onClick={()=>{tochange(ite);}}/>
                                    ))}
                                </Nav.Sub>
                            )
                        }
                        else{
                            return(
                                <Nav.Item key={index+'a'} itemKey={item.itemKey} text={item.text} onClick={()=>{tochange(item)}} />
                            ) 
                        }
                    })}
                    <Nav.Sub
                        itemKey={"user"}
                        text={
                            <div
                                style={{
                                    marginLeft: 20,
                                    display: "inline-block",
                                    color: "white",
                                }}
                            >
                                <img
                                    src="/assets/images/background/notice.png"
                                    style={{
                                        display: "inline-block",
                                        width: 18,
                                        height: 18,
                                        position: "relative",
                                        top: 6,
                                        left: -10,
                                    }}
                                />

                                <Avatar size="small" color="light-blue" style={{marginRight:4}}>
                                    <img src="/assets/images/avatar/6.png" />
                                </Avatar>
                                <div style={{
                                    display: "inline-block", position: "relative",
                                    top: 10,
                                    left: 4,
                                    marginRight: 4,
                                }}>
                                    <div>你好！</div>
                                    <div>{user && user.displayName}</div>
                                </div>
                            </div>
                        }
                    >
                        <Nav.Item itemKey={"logout"} text={"退出"} />
                    </Nav.Sub>
                    </>
                }
            />
            </div>
        </>
    );
};

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

export default connect(mapStateToProps)(Header);