'use strict';
import React from 'react';
import { Menu } from 'antd';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import CryptoJS from 'crypto-js';
import styles from './style.css';
import {
    MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined
} from '@ant-design/icons';
import ResetPasswordModal from '../../../sections/memberManagement/components/resetPassword';
const Header = props => {
    const { dispatch, history, user, pathname, toggleCollapsed, collapsed, actions } = props

    const onFinish = async (values) => {
        const secretKey = "freesun";
        const dataToSave = {
            ...values,
            oldpassword: CryptoJS.AES.encrypt(values.oldpassword, secretKey).toString(),
            password: CryptoJS.AES.encrypt(values.password, secretKey).toString(),
        }
        return dispatch(
            actions.memberManagement.modifyUser(user.id, dataToSave, values?.msg || ''),
        ).then((res) => {
            if (res.success) {
                return true;
            } else {
                return false;
            }
        });
    };

    const handelClick = item => {
        if (item.key == 'logout') {
            dispatch(actions.auth.logout(user));
            history.push(`/signin`);
        }
    }

    let current = pathname;
    if (pathname == '/' || pathname == '') {
        current = 'default';
    } else if (pathname.charAt(0) == '/') {
        current = pathname.substring(1);
    }

    if (current.indexOf('/') != -1) {
        current = current.substring(0, current.indexOf('/'));
    }

    return (
        <div className={styles.header}>
            <div className={styles['header-fold']}>
                <span onClick={toggleCollapsed} style={{ marginRight: 20 }}>
                    {
                        collapsed ?
                            <MenuUnfoldOutlined /> : <MenuFoldOutlined />
                    }
                </span>
                <div className={styles['header-title']} style={{}}>
                    <img src='/assets/images/favicon.ico' style={{ margin: '0 12px 4px 12px', height: 42, borderRadius: 4 }} />政务数据资源中心
                </div>
            </div>
            <div id="nav" className={styles['header-nav']}>
                <Menu
                    mode='horizontal'
                    selectedKeys={[current]}
                    style={{ border: 0, background: '#1890ff' }}
                    onClick={handelClick}
                    theme={'light'}
                    items={[{
                        label: <span style={{ color: 'aliceblue' }}>{user.displayName}</span>,
                        key: "user",
                        icon: <img className={styles['header-nav-user-img']} src={`/assets/images/avatar/5.png`} />,
                        children: [
                            {
                                icon: <UserOutlined />,
                                label: <ResetPasswordModal
                                    editData={user}
                                    triggerRender={<a>修改密码</a>}
                                    title="修改密码"
                                    onFinish={onFinish}
                                    key="resetPassword"
                                />,
                                key: 'resetPassword'
                            },
                            {
                                label: '退出', key: 'logout', icon: <LogoutOutlined />
                            },
                        ],
                    }]}
                />
            </div>
        </div>
    );
};

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

export default connect(mapStateToProps)(Header);