/*
 * @Author: cclu 
 * @Date: 2022-04-28 10:47:35
 * @LastEditTime: 2022-11-04 16:17:32
 * @LastEditors: cclu lkrnchocolateaaron@gmail.com
 * @Description: 用户设置页面
 * @FilePath: \cloud-platform\src\pages\account\setting\index.tsx
 */

import { GridContent } from "@ant-design/pro-layout"
import { connect } from "umi"
import { useState } from "react"
import { Menu, Tooltip } from "antd"

import type { CurrentUser } from "umi"
import type { ConnectState } from "@/models/connect"
import './style.less'
import { InfoCircleOutlined } from "@ant-design/icons"
import BaseView from "./components/BaseView"
// import CompanyInfo from "../company/components/CompanyInfo"

const { Item } = Menu

type SettingsStateKeys = 'base'
type SettingsState = {
    mode: 'inline' | 'horizontal',
    selectKey: SettingsStateKeys
}

const AccountSetting: React.FC<{ currentUser: CurrentUser | undefined }> = ({ currentUser }) => {

    const menuMap: Record<string, React.ReactNode> = {
        base: '基础设置',
        // company: '公司资料'
    }
    const [initConfig, setInitConfig] = useState<SettingsState>({
        mode: "inline",
        selectKey: 'base'
    })
    // 根据当前选中的key 渲染对应的组件
    const renderChildren = () => {
        const { selectKey } = initConfig;
        switch (selectKey) {
            case 'base':
                return <BaseView />;
            // case 'company':
            //     return <CompanyInfo/>;
            // case 'security':
            //     return <SecurityView />;
            // case 'binding':
            //     return <BindingView />;
            // case 'notification':
            //     return <NotificationView />;
            default:
                return null;
        }
    };

    return (
        <GridContent>
            <div className="main">
                <div className="leftMenu">
                    <Menu
                        mode={initConfig.mode}
                        selectedKeys={[initConfig.selectKey]}
                        onClick={({ key }) => {
                            setInitConfig({
                                ...initConfig,
                                selectKey: key as SettingsStateKeys
                            })
                        }}
                    >
                        {
                            Object.keys(menuMap).map((item) => <Item key={item}>{menuMap[item]}</Item>)
                        }
                    </Menu>
                </div>
                <div className="right">
                    <div className="title">
                        <Tooltip title="您修改的信息，重新登陆后生效。">{menuMap[initConfig.selectKey]} <InfoCircleOutlined style={{ fontSize: 14, color: "#1890ff" }} /> </Tooltip></div>

                    {renderChildren()}
                </div>
            </div>

        </GridContent>
    )
}

export default connect(({ user }: ConnectState) => ({
    currentUser: user.currentUser
}))(AccountSetting)