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

import classNames from 'classnames';
import propTypes from 'prop-types';
import KeyCode from 'rc-util/lib/KeyCode';
import Icon from '@ant-design/icons';
import Categories from './MinCategories';
import './min.less';
import { ConfigProvider } from 'antd';
// eslint-disable-next-line import/extensions
import { events } from '@wisdom-utils/utils/lib/helpers';

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 { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('panel-min');
  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 ? 'w110' : 'w210';
  const panelCls = classNames(
    [`${prefixCls}-mainPane`],
    props.visible ? `${prefixCls}-mainPane-visible` : `${prefixCls}-mainPane-hidden`,
    [`${prefixCls}-mainPane-${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();
  }, [addDocumentEvents, props.visible, removeDocumentEvents]);
  return (
    <div
      className={panelCls}
      tabIndex="-1"
      onKeyDown={event => (props.visible && props.keyboard ? handleKeyDown(event) : undefined)}
      ref={domRef}
    >
      <div className={`${prefixCls}-mainPane-main`}>
        <div className={`${prefixCls}-mainPane-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;
