import React, { useEffect, useState } from "react";
import clsx from "clsx";
import { useHistory } from "react-router-dom";
import styles from "./style.less";
import { Row, Col } from "antd";
import { menuBaseData, envUrl } from "./data";
import NewIcon from "./newIcon";

export default function MenuBox(props) {
  const { platformName, changePage, menuData, page } = props;
  // const [itemAction, setItemAction] = useState("");
  const [envTag, setEnvTag] = useState("local");
  let history = useHistory();

  function goToPage(item) {
    window.log({ c: "top_menu", d: item.key });
    // setItemAction(item);
    // if (envTag !== "local") {
    // window.open(`${envUrl['tools'].path[envTag]}#${item.path}`, "_self");
    // return;
    // }
    changePage(item);
  }

  // 判断当前运行环境
  function getEnvTag() {
    const { host } = location;
    if (host.indexOf("localhost") < 0) {
      setEnvTag("dev");
      if (host.indexOf("zhihui-pre.intra.xiaojukeji.com") > -1) {
        setEnvTag("pre");
      }
      if (host.indexOf("zhihui.xiaojukeji.com") > -1) {
        setEnvTag("prod");
      }
    }
  }

  useEffect(() => {
    getEnvTag();
  }, []);

  function switchProjects({ path, key }) {
    // if (key !== platformName) {
    //   window.open(envUrl[key].path[envTag], "_self");
    // }
    window.log({ c: "top_menu", d: key });
    if (envTag !== "local") {
      window.open(envUrl[key].path[envTag], "_self");
      return;
    }
    history.push("/");
  }

  // 处理 unicode 无法直接通过变量显示问题
  function translateHtmlCharater(html) {
    const div = document.createElement("i");
    div.innerHTML = html;
    return div.textContent;
  }

  function icon(item) {
    return (
      <Col key={item.key} span={6} className="item-wrapper" onClick={() => goToPage(item)}>
        <span className="custom-icon-wrapper">
          <i className={clsx("iconfont", "icon", item.menuBase.class)} style={item.menuBase.color && !item.menuBase.class ? { color: item.menuBase.color } : { color: "transparent" }}>
            {translateHtmlCharater(item.menuBase.icon)}
          </i>
          {page === item.key && (
            <span className="new">
              <NewIcon />
            </span>
          )}
        </span>
        <div className={"name"}>{item.name}</div>
      </Col>
    );
  }

  function menuItem(item) {
    return (
      <div className="children-menu-wrapper" key={item.key}>
        <div onClick={() => switchProjects(item)} className={clsx("title", platformName === item.key && "active")}>
          {item.name}
        </div>
        <Row gutter={[24, 24]} className="box" style={{ margin: "0" }}>
          {item.menuList.length > 0 && item.menuList.map((t) => icon(t))}
        </Row>
      </div>
    );
  }
  return (
    <div className="menu-wrapper">
      <div className="children-menu-wrapper borderBottom no-children">
        {menuBaseData.map((elm, index) => {
          if (index < 4) {
            return (
              <div onClick={() => switchProjects(elm)} style={elm.styles} className={clsx("title", platformName === elm.key && "active")} key={elm.key}>
                <img width="16" height="14" src={elm.iconData} style={{position: "relative", top: "-2px", marginRight: "5px", ...elm.imageStyle}} alt={""}/>
                <span className="content">{elm.name}{!page && platformName === elm.key && (<span className="new"><NewIcon /></span>)}</span>
              </div>
            );
          }
        })}
      </div>
      <div className="children-menu-wrapper" key={menuBaseData[4].key}>
        <div onClick={() => switchProjects(menuBaseData[4])} className={clsx("title", platformName === menuBaseData[4].key && "active")}>
          <img width="16" height="16" src={menuBaseData[4].iconData} style={{ position: "relative", top: "-2px", marginRight: "5px" }} alt={""}/>
          {menuBaseData[4].name}{!page && platformName === menuBaseData[4].key && (<span className="new"><NewIcon /></span>)}
        </div>
        <Row gutter={[24, 24]} className="box" style={{ marginTop: "5px" }}>
          {menuBaseData[4].menuList.length > 0 && menuBaseData[4].menuList.map((t) => icon(t))}
        </Row>
      </div>
    </div>
  );
}
