import React, { memo, useCallback } from 'react';
import PropTypes from 'prop-types';
import { Icon, Switch, Layout } from 'antd';
import styled from 'styled-components';
import store from 'store';
import ScrollBar from '../ScrollBar/index.jsx';
import SiderMenu from './Menu.jsx';

const { Sider } = Layout;

const SiderTreeStyled = styled(Sider)`
  box-shadow: 0 0 28px 0 rgba(24, 144, 255, 0.1);
  .ant-menu-inline,
  .ant-menu-vertical,
  .ant-menu-vertical-left {
    border-right: none;
  }
  .ant-layout-sider-children {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
`;

const LogoStyled = styled.div`
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  box-shadow: 0 1px 9px -3px rgba(0, 0, 0, 0.2);
  h1 {
    vertical-align: text-bottom;
    font-size: 16px;
    text-transform: uppercase;
    display: inline-block;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    margin-bottom: 0;
  }
`;

const SwitchThemeStyled = styled.div`
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  overflow: hidden;
  transition: all 0.3s;

  span {
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
  }

  .anticon {
    min-width: 14px;
    margin-right: 4px;
    font-size: 14px;
  }
`;

const LogoImage = styled.img`
  width: 36px;
  margin-right: 8px;
`;

const ScrollBarStyled = styled(ScrollBar)`
  height: calc(100vh - 120px);
  flex: 1 1;
  padding: 24px 0;
`;

const SiderTree = memo(({ theme, collapsed, onThemeChange, ...rest }) => {
  const siderProps = {
    theme,
    collapsed,
    onThemeChange,
    ...rest,
  };

  const handleThemeChange = useCallback(() => {
    let value = theme === 'dark' ? 'light' : 'dark';
    store.set('theme', value);
    onThemeChange({
      value,
    });
  }, [theme]);

  return (
    <SiderTreeStyled
      width={256}
      theme={theme}
      breakpoint='lg'
      trigger={null}
      collapsible
      collapsed={collapsed}
    >
      <LogoStyled>
        <LogoImage alt='logo' src={require('assets/img/logo.png')} />
        {collapsed ? null : <h1 style={{ color: '#01D1C2' }}>微圈</h1>}
      </LogoStyled>
      <ScrollBarStyled
        option={{
          suppressScrollX: true,
        }}
      >
        <SiderMenu {...siderProps} />
      </ScrollBarStyled>
      {collapsed ? null : (
        <SwitchThemeStyled>
          <span style={{ color: '#666' }}>
            <Icon type='bulb' />
            切换主题色
          </span>
          <Switch
            onChange={handleThemeChange}
            defaultChecked={theme === 'dark'}
            checkedChildren='深'
            unCheckedChildren='浅'
          />
        </SwitchThemeStyled>
      )}
    </SiderTreeStyled>
  );
});

SiderTree.propTypes = {
  menus: PropTypes.array,
  theme: PropTypes.string,
  collapsed: PropTypes.bool,
  selectedKey: PropTypes.string,
  openKeys: PropTypes.array,
  onThemeChange: PropTypes.func,
  onChangeSelectKey: PropTypes.func,
  onChangeOpenKeys: PropTypes.func,
};

export default SiderTree;