import React, { useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Layout } from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { Sider, Header } from 'components/Layout/index.jsx';
import { renderRoutes, matchRoutes } from 'utils';
import { APP_COMMON } from 'models/common';
import { matchRoutesOpenkeys, matchRoutesSelectkeys, pathRoutes, formatPath } from 'utils';

const { Content } = Layout;

const LayoutStyled = styled(Layout)`
  height: 100vh;
`;

const PrimaryLayout = connect(
  state => ({ ...state }),
  dispatch => ({
    handleUpdate(payload) {
      dispatch({
        type: APP_COMMON,
        payload,
      });
    },
  }),
)(
  withRouter(
    ({ location, children, common: { theme, collapsed, selectedKey, openKeys }, handleUpdate }) => {
      useEffect(() => {
        const _pathname = location.pathname === '/' ? '/dashboard' : location.pathname;
        const pathname = formatPath(_pathname);
        const pathRouteArr = matchRoutes(children, pathname);
        const isMatchRoute = pathRoutes(pathRouteArr, pathname);
        if (!isMatchRoute) return;
        const keyArr = matchRoutesOpenkeys(pathRouteArr, pathname).filter(_ => _);
        const selectKey = matchRoutesSelectkeys(pathRouteArr, pathname);
        if (keyArr.length > 0) {
          handleUpdate({
            selectedKey: selectKey,
            openKeys: keyArr,
          });
          return;
        }
        handleUpdate({
          selectedKey: selectKey,
        });
      }, []);
      // 处理选中slider key
      const onChangeSelectKey = useCallback(selectedKey => {
        handleUpdate({
          selectedKey,
        });
      }, []);

      // 处理打开的key列表
      const onChangeOpenKeys = useCallback(openKeys => {
        handleUpdate({
          openKeys,
        });
      }, []);

      const onCollapseChange = useCallback(collapsed => {
        handleUpdate({
          collapsed,
        });
      }, []);

      const onThemeChange = useCallback(({ value }) => {
        handleUpdate({
          theme: value,
        });
      }, []);

      // 处理menus数组
      const menus = children.map(_route => _route.hidden !== true && _route).filter(_ => _);

      // siderProps
      const siderProps = {
        theme,
        menus,
        collapsed,
        selectedKey,
        openKeys,
        onChangeSelectKey,
        onThemeChange,
        onChangeOpenKeys,
      };
      // headerProps
      const headerProps = {
        collapsed,
        onCollapseChange,
      };
      return (
        <LayoutStyled>
          <Sider {...siderProps} />
          <Layout>
            <Header {...headerProps} />
            <Content
              style={{
                margin: '88px 16px 16px 16px',
                padding: 24,
                background: '#fff',
                minHeight: 'calc(100% - 104px)',
              }}
            >
              {renderRoutes(children)}
            </Content>
          </Layout>
        </LayoutStyled>
      );
    },
  ),
);

PrimaryLayout.propTypes = {
  location: PropTypes.object,
  children: PropTypes.array.isRequired,
  handleUpdata: PropTypes.func,
  app: PropTypes.object,
};

export default PrimaryLayout;