import React, {
  useEffect,
  useRef,
  useState,
} from 'react';

import classNames from 'classnames';
import propTypes from 'prop-types';
import KeyCode from 'rc-util/lib/KeyCode';

import Categories from './Categories';
import styles from './index.less';
import Menu from './Menu';
import { events } from './utils/index.js';

const Panel = props => {
  const panelCls = classNames(
    styles.mainPane,
    props.visible ? styles.visible : styles.hidden,
  );
  const domRef = useRef();
  const [currentMenu, setCurrentMenu] = useState(() => {
    return (
      (props.data &&
        Array.isArray(props.data) &&
        props.data.length > 0 &&
        props.data[0]) ||
      {}
    );
  });
  let _clickEvents = null;
  const handleKeyDown = event => {
    if (event.keyCode === KeyCode.ESC) {
      const { onClose } = props;
      event.stopPropagation();
      if (onClose) {
        onClose(event);
      }
    }
  };
  const domFocus = () => {
    if (domRef) {
      domRef.current.focus();
    }
  };
  const handleDocumentClick = e => {
    if (props.visible) {
      const node = domRef && domRef.current;
      if (
        node &&
        (node === e.target ||
          node.contains(e.target) ||
          (e.target !== document &&
            !document.documentElement.contains(e.target)))
      ) {
        return;
      }
      props.onClose && props.onClose(e);
    }
  };
  const addDocumentEvents = () => {
    if (props.canCloseByOutSideClick) {
      _clickEvents = events.on(document, 'click', handleDocumentClick);
    }
  };
  const removeDocumentEvents = () => {
    _clickEvents.off();
    _clickEvents = null;
  };

  const getCategories = () => {
    let data = props.data;
    data = data.filter(item => {
      return item.hasOwnProperty('extData');
    });
    return data;
  };

  const handleCategories = index => {
    setCurrentMenu(props.data[index]);
    props.onChange && props.onChange(index);
  };

  const selectItem = (event, item) => {
    console.log(event, item);
    props.onSelect && props.onSelect(item.path);
  };
  useEffect(() => {
    if (props.visible) {
      domFocus();
    }
    addDocumentEvents();

    return () => removeDocumentEvents();
  }, [props.visible]);
  return (
    <div
      className={panelCls}
      tabIndex="-1"
      onKeyDown={event =>
        props.visible && props.keyboard ? handleKeyDown(event) : undefined
      }
      ref={domRef}
    >
      <div className={styles.header}>
        <div className={styles['header-title']}>子系统切换</div>
      </div>
      <div className={styles.main}>
        <div className={styles['main-left']}>
          <Categories data={getCategories()} onChange={handleCategories} />
        </div>
        <div className={styles['main-menus']}>
          <Menu data={currentMenu || []} handleClick={selectItem} />
        </div>
      </div>
    </div>
  );
};
Panel.propTypes = {
  visible: propTypes.bool,
  keyboard: propTypes.bool,
  onClose: propTypes.func,
  canCloseByOutSideClick: propTypes.bool,
};
Panel.defaultProps = {
  visible: false,
  keyboard: true,
  canCloseByOutSideClick: true,
  onClose: () => {},
};
export default Panel;
