import React, { useState, useRef, useLayoutEffect, useEffect } from 'react';
import { GridContent } from '@ant-design/pro-layout';
import { Menu } from 'antd';
import BaseView from './components/base';
import EnterpriseLog from './components/EnterpriseLog';
import styles from './style.less';
import { GetCompanyInfo, GetCosRequestURL, updateCompany } from './components/service';
const { Item } = Menu;

const Settings = () => {
  const menuMap = {
    EnterpriseLog: 'LOG设置',
    //base: '企业基本信息设置'
  };
  const [initConfig, setInitConfig] = useState({
    mode: 'inline',
    selectKey: 'EnterpriseLog',
  });
  const dom = useRef();
  const [fetchCompanyInfo, setFetchCompanyInfo] = useState({
    logo: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
  });

  const resize = () => {
    requestAnimationFrame(() => {
      if (!dom.current) {
        return;
      }

      let mode = 'inline';
      const { offsetWidth } = dom.current;

      if (dom.current.offsetWidth < 641 && offsetWidth > 400) {
        mode = 'horizontal';
      }

      if (window.innerWidth < 768 && offsetWidth > 400) {
        mode = 'horizontal';
      }

      setInitConfig({ ...initConfig, mode: mode });
    });
  };

  useLayoutEffect(() => {
    if (dom.current) {
      window.addEventListener('resize', resize);
      resize();
    }

    return () => {
      window.removeEventListener('resize', resize);
    };
  }, [dom.current]);

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

  const renderChildren = () => {
    const { selectKey } = initConfig;

    switch (selectKey) {
      // case 'base':
      //   return <BaseView />;

      case 'EnterpriseLog':
        return <EnterpriseLog fetchCompanyInfo={fetchCompanyInfo} onUpdateCompanyInfo={onUpdateCompanyInfo} />;

      default:
        return null;
    }
  };

  const onUpdateCompanyInfo = async (companyInfo) => {
    await updateCompany(companyInfo); 
    await onFetchCompanyInfo(); 
  }

  const onFetchCompanyInfo = async () => {
    const response = await GetCompanyInfo();
    if (response.statusCode === 200) {
      setFetchCompanyInfo(response.data);
    }
  }

  useEffect(() => {
    onFetchCompanyInfo();
  }, []);

  return (
    <GridContent>
      <div
        className={styles.main}
        ref={(ref) => {
          if (ref) {
            dom.current = ref;
          }
        }}
      >
        <div className={styles.leftMenu}>
          <Menu
            mode={initConfig.mode}
            selectedKeys={[initConfig.selectKey]}
            onClick={({ key }) => {
              setInitConfig({ ...initConfig, selectKey: key });
            }}
          >
            {getMenu()}
          </Menu>
        </div>
        <div className={styles.right}>
          <div className={styles.title}>{menuMap[initConfig.selectKey]}</div>
          {renderChildren()}
        </div>
      </div>
    </GridContent>
  );
};

export default Settings;
