/* eslint-disable */
import React, { useCallback, useMemo, useRef, useState, useContext } from "react";
import { StarFilled } from "@ant-design/icons";
import * as commonServices from '@/services/services';
import { Modal, message } from 'antd-v4';
import { AutoComplete, Input } from "antd-v4";
import * as commonUtils from "@/utils/utils"; /* 通用方法 */
import config from '@/utils/config';
const MenuSearchPopovor = props => {

  const { menuPanel, onSetMenuSearchPopoverVisible, onAddPane, app, dispatch, updateMenuPanel } = useMemo(
    () => {
      return props;
    },
    []
  );

  const popovorRef = useRef(null);
  const handleTabClick = useCallback(e => {
    const paneKey = new Date().getTime().toString();
    const formId = e.sId;
    const route = e.sName;
    const title = e.sMenuName;
    const sModelsType = e.sModelType;
    const { sProcName } = e;
    for (const each of app.panes) {
      /* 解决导航栏打开页签，Modal不消失问题 */
      each.notCurrentPane = true;
    }
    const pane = {
      title,
      route,
      formId,
      key: paneKey,
      sModelsType,
      sProcName,
      notCurrentPane: false
    };
    onAddPane(pane);
  });
  function getAddParameter(value, url) {
    /* 增加常用操作 */
    dispatch({ type: 'app/getAddParameter', payload: { value, url } });
  }
  function getDelParameter(value, url) {
    /* 删除常用操作 */
    dispatch({ type: 'app/getDelParameter', payload: { value, url } });
  }
  const handleStarClick = useCallback(async (e, data) => {
    e.stopPropagation();
    const { sId, sName, sMenuName, iCommonlyUsed } = data;
    const value = { sFormId: sId, sFormUrl: sName, sFormName: sMenuName };
    const { token } = props.app;
    if (iCommonlyUsed === '0') {
      const addUrl = `${config.server_host}parameter/addParameter?sModelsId=${sId}`;
      getAddParameter(value, addUrl)
    } else {
      const delUrl = `${config.server_host}parameter/deleteParameter?sModelsId=${sId}`;
      getDelParameter(value, delUrl)
    }
    onSetMenuSearchPopoverVisible(false)
    // todo更新数据，重新渲染
    setTimeout(() => {
      const url = `${config.server_host}business/getBuMenu?sModelsId=100`;
      dispatch({ type: 'menuPanel/getMenuPanel', payload: { url } });
    }, 300);
  });
  const handleGetSearchInputOption = useCallback(() => {
    const renderTitle = (title, title1) => (
      <span>
        {title1}
        <span
          style={{
            float: "right"
          }}
        >
          {title}
        </span>
      </span>
    );
    const renderItem = (title, data, bStar) => ({
      value: title,
      data: data,
      label: (
        <div
          style={
            {
              display: "flex",
              justifyContent: "space-between"
            }
          }
        >
          {title}
          {
            <span>
              <StarFilled
                style={{ color: bStar ? "#f6c136" : "#E6E6E6" }}
                onClick={(event) => handleStarClick(event, data)}
              />
            </span>
          }
        </div>
      )

    });
    const options = [];
    const commonlyUsedOption = [];

    if (menuPanel.panelMenus) {
      menuPanel.panelMenus.forEach(item => {
        if (commonUtils.isNotEmptyArr(item.children)) {
          item.children.forEach(item1 => {
            if (commonUtils.isNotEmptyArr(item1.children)) {
              const label = renderTitle(item.sMenuName, item1.sMenuName);
              const temp = { label, options: [] };
              const temp1 = { label, options: [] };
              item1.children.forEach(item2 => {
                const value = {
                  ...item2,
                  parentMenu: item1,
                  grandParentMenu: item
                };
                if (item2.iCommonlyUsed === "1") {
                  temp1.options.push(renderItem(item2.sMenuName, value, true));
                } else {
                  temp.options.push(renderItem(item2.sMenuName, value));
                }
              });
              if (commonUtils.isNotEmptyArr(temp.options)) {
                options.push(temp);
              }
              if (commonUtils.isNotEmptyArr(temp1.options)) {
                commonlyUsedOption.push(temp1);
              }
            }
          });
        }
      });
    }

    return [...commonlyUsedOption, ...options];
  }, [menuPanel.panelMenus]);

  return (
    <div ref={popovorRef}>
      <AutoComplete
        style={{ width: 250 }}
        popupClassName="certain-category-search-dropdown"
        options={handleGetSearchInputOption()}
        autoFocus
        defaultOpen
        onBlur={() => {
          onSetMenuSearchPopoverVisible(false);
        }}
        filterOption={(inputValue, option) => {
          let result = false;
          const { data } = option;
          if (commonUtils.isNotEmptyObject(data)) {
            const { sMenuName, parentMenu, grandParentMenu } = data;
            const { sMenuName: sMenuName1 } = parentMenu;
            const { sMenuName: sMenuName2 } = grandParentMenu;
            const result0 =
              sMenuName.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1;
            const result1 =
              sMenuName1.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1;
            const result2 =
              sMenuName2.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1;
            result = result0 || result1 || result2;
          }
          return result;
        }}
        onSelect={(_, option) => {
          // popovorRef.current.animate([{ width: '250px' }, { width: 0 }], {
          //   duration: 2000, iterations: 1
          // });
          handleTabClick(option.data);
          onSetMenuSearchPopoverVisible(false);
        }}
      >
        <Input.Search size="large" placeholder="搜索" />
      </AutoComplete>
    </div>
  );
};

export default MenuSearchPopovor;