import React from 'react';
import {Badge, Button, Dropdown, Flex, Layout, Modal, Space, theme} from "antd";
import {DownOutlined, KeyOutlined, LogoutOutlined, MailOutlined, UserOutlined} from "@ant-design/icons";
import {useNavigate} from "react-router-dom";
import ChangePasswordModal from "./ChangePasswordModal";

function LayoutHeader(props) {
    const {
        token: {colorBgContainer, borderRadiusLG, colorBgBase},
    } = theme.useToken();

    const navigate = useNavigate();

    const {profile, commonAxios, messageApi} = props;
    const [changePasswordModalOpen, setChangePasswordModalOpen] = React.useState(false);

    const logout = () => {
        Modal.confirm({
            title: '确认退出登录吗？',
            onOk: () => {
                commonAxios.post('/api/auth/logout').then(res => {
                    localStorage.removeItem('token');
                    navigate('/auth/login');
                })
            },
            onCancel: () => {

            }
        });
    }

    const accountItems = [
        {
            label: (
                <div onClick={() => setChangePasswordModalOpen(true)}>修改密码</div>
            ),
            icon: <KeyOutlined/>,
            key: 'changePassword',
        },
        {
            type: 'divider',
        },
        {
            label: <div onClick={logout}>退出登录</div>,
            key: 'logout',
            icon: <LogoutOutlined/>,
            danger: true,
        },
    ];

    return (
        <div>
            <ChangePasswordModal commonAxios={commonAxios} messageApi={messageApi} open={changePasswordModalOpen}
                                 setOpen={setChangePasswordModalOpen} closable={true}/>
            <Layout.Header
                style={{
                    height: '64px',
                    background: colorBgBase
                }}
            >
                <div
                    style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        height: '100%'
                    }}
                >
                    <a href={'/overview'} style={{height: '100%', color: 'black'}}>
                        <Flex justify={'flex-start'} style={{height: '100%'}} align={"center"}>

                            <img style={{width: 'auto', height: '80%'}} src={'/hrbnu_logo.png'}
                                 alt={'哈师大logo'}/>
                            <h2 style={{marginLeft: '20px'}}>工作量精算管家</h2>

                        </Flex>
                    </a>
                    <Flex justify={"flex-start"} align={"center"} gap={"large"}>
                        <a hidden>
                            <Badge count={0}>
                                <MailOutlined style={{fontSize: '15px'}}/>
                            </Badge>
                        </a>
                        <Dropdown
                            menu={{
                                items: accountItems,
                            }}
                        >
                            <Button type={'text'}>
                                <Space>
                                    <UserOutlined/>
                                    {profile.staffNumber}{profile.name}
                                    <DownOutlined/>
                                </Space>
                            </Button>
                        </Dropdown>
                    </Flex>
                </div>
            </Layout.Header>
        </div>
    );
}

export default LayoutHeader;