/*
 * compName     : 个人设置页
 * Description  :
 * Author       : 黎永顺
 * Date         : 2021-11-05 10:04:01
 * LastEditors  : 黎永顺
 * LastEditTime : 2021-11-05 11:10:59
 */
import React, { useState } from 'react';
import { Menu } from 'antd';
import { GridContent } from '@ant-design/pro-layout';
import PageLayout from '@/layouts/PageLayout';
import BaseView from './components/Base';
import InterfaceView from './components/Interface';
import NotificationView from './components/Notification';
import SecurityView from './components/Security';
import styles from './index.less';

const { Item } = Menu;

type SettingsStateKeys = 'base' | 'interface' | 'notification' | 'security';

const Setting: React.FC = () => {
  const [initConfig, setInitConfig] = useState<SettingsStateKeys>('base');
  const menuMap: Record<string, React.ReactNode> = {
    base: '基本设置',
    security: '安全设置',
    interface: '界面偏好',
    notification: '新消息通知',
  };

  const getMenu = () => {
    return Object.keys(menuMap).map((item) => (
      <Item key={item}>{menuMap[item]}</Item>
    ));
  };

  const renderChildren = () => {
    switch (initConfig) {
      case 'base':
        return <BaseView />;
      case 'interface':
        return <InterfaceView />;
      case 'notification':
        return <NotificationView />;
      case 'security':
        return <SecurityView />;
      default:
        return null;
    }
  };

  return (
    <PageLayout>
      <GridContent>
        <div className={styles.main}>
          <div className={styles.leftMenu}>
            <Menu
              selectedKeys={[initConfig]}
              onClick={({ key }) => {
                setInitConfig(key as SettingsStateKeys);
              }}
            >
              {getMenu()}
            </Menu>
          </div>
          <div className={styles.right}>
            <div className={styles.title}>{menuMap[initConfig]}</div>
            {renderChildren()}
          </div>
        </div>
      </GridContent>
    </PageLayout>
  );
};

export default Setting;
