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

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

    return (
        <>
            <Nav
                mode={"horizontal"}
                onClick={({ itemKey }) => {
                    if (itemKey == "logout") {
                        dispatch(actions.auth.logout(user));
                        const iotAuth = document.getElementById('iotAuth').contentWindow;
                        iotAuth.postMessage({ action: 'logout' }, '*');
                        if (socket) {
                            socket.disconnect();
                        }
                        history.push(`/signin`);
                    }
                    else{
                        console.log('1111111111111111');
                    }
                }}
                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)=>(
                        <Nav.Sub
                        key={index}
                        itemKey={item.itemKey}
                        text={item.text}
                        dropdownStyle={{color:'#F2F3F5'}}
                        >
                            {item.hasOwnProperty('items')&&item.items.map((ite,idx)=>(
                                <Nav.Item key={idx} itemKey={ite.itemKey} text={ite.text} />
                            ))}
                        </Nav.Sub>
                    ))}
                    <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>
                    </>
                }
            />
        </>
    );
};

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

export default connect(mapStateToProps)(Header);