import React from 'react';
import PropTypes from 'prop-types';
import styles from './Layout.less';
import { config } from '../../utils';
import Menus from './Menu';

const Sider = ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys, menu }) => {
  const menusProps = {
    menu,
    siderFold,
    darkTheme,
    location,
    navOpenKeys,
    changeOpenKeys,
  };
  return (
    <div>
      <div className={styles.logo}>
        {/*<img alt={'logo'} src={siderFold ? config.logoSmall : config.logo} />*/}
        {!siderFold ? <img alt={'logo'} src={config.logo} /> : <h2>{config.name}</h2>}
      </div>
      <Menus {...menusProps} />
      {/*{!siderFold ? <div className={styles.switchtheme}>*/}
      {/*<span><Icon type="bulb"/>Switch Theme</span>*/}
      {/*<Switch */}
      {/*onChange={changeTheme} */}
      {/*defaultChecked={darkTheme} */}
      {/*checkedChildren="Dark" */}
      {/*unCheckedChildren="Light"*/}
      {/*/>*/}
      {/*</div> : ''}*/}
    </div>
  );
};

Sider.propTypes = {
  menu: PropTypes.array,
  siderFold: PropTypes.bool,
  darkTheme: PropTypes.bool,
  location: PropTypes.object,
  changeTheme: PropTypes.func,
  navOpenKeys: PropTypes.array,
  changeOpenKeys: PropTypes.func,
};

export default Sider;
