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

import classNames from 'classnames';
import propTypes from 'prop-types';
import KeyCode from 'rc-util/lib/KeyCode';
import Icon, { MenuOutlined } from '@ant-design/icons';
import Categories from './MinCategories';
import styles from './min.less';
// eslint-disable-next-line import/extensions
import { events } from './utils/index.js';

const ThLarge = props => (
  <svg viewBox="0 0 1024 1024" version="1.1" width="14" height="14">
    <path
      d="M592 64h384c26.51 0 48 21.49 48 48v320c0 26.51-21.49 48-48 48H592c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48z m-160 0H48C21.49 64 0 85.49 0 112v320c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zM0 592v320c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48V592c0-26.51-21.49-48-48-48H48c-26.51 0-48 21.49-48 48z m592 368h384c26.51 0 48-21.49 48-48V592c0-26.51-21.49-48-48-48H592c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48z"
      fill="#737f97"
    />
  </svg>
);

const ThLargeIcon = props => <Icon component={ThLarge} {...props} />;

const MinPanel = props => {
  const getCategories = () => {
    let { data } = props;
    // eslint-disable-next-line no-prototype-builtins
    data = data.filter(item => item.hasOwnProperty('extData'));
    return data;
  };
  
  const categories = getCategories();
  const wcls = categories.length <= 10 ? styles.w110: styles.w210
  const panelCls = classNames(
    styles.mainPane,
    props.visible ? styles.visible : styles.hidden,
    wcls
  );

  const domRef = useRef();
  // eslint-disable-next-line no-debugger;
  const [currentMenu, setCurrentMenu] = useState(null);

  useEffect(() => {
    setCurrentMenu(props.data[props.currentMenuIndex]);
  }, [props.data, props.currentMenuIndex]);

  // eslint-disable-next-line no-underscore-dangle
  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;
      }
      // eslint-disable-next-line no-unused-expressions
      props.onClose && props.onClose(e);
    }
  };
  const addDocumentEvents = () => {
    if (props.canCloseByOutSideClick) {
      _clickEvents = events.on(document, 'click', handleDocumentClick);
    }
  };
  const removeDocumentEvents = () => {
    _clickEvents.off();
    _clickEvents = null;
  };


  const selectItem = (event, item) => {
    // eslint-disable-next-line no-unused-expressions
    props.onSelect && props.onSelect(item);
  };
 

  const handleCategories = index => {
    setCurrentMenu(props.data[index]);
    // eslint-disable-next-line no-unused-expressions
    props.onChange && props.onChange(index);
  };
  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.main}>
        <div className={styles['main-left']}>
          <Categories
            mode="mini"
            data={categories}
            onChange={handleCategories}
            currentMenuIndex={props.currentMenuIndex}
          />
        </div>
      </div>
    </div>
  );
};
MinPanel.propTypes = {
  visible: propTypes.bool,
  keyboard: propTypes.bool,
  onClose: propTypes.func,
  canCloseByOutSideClick: propTypes.bool,
};
MinPanel.defaultProps = {
  visible: false,
  keyboard: true,
  canCloseByOutSideClick: true,
  onClose: () => {},
};
export default MinPanel;