import React from "react";
import { NavBar, SafeArea, TabBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import "./index.less";
import { Translate, Electrocardiogram, GithubOne, Blossom, User } from "@icon-park/react";

interface MainLayoutProps {
  children: React.ReactNode;
  isShowNavBar?: boolean;
  title?: string;
  navBarRight?: React.ReactNode;
  onLink?: () => void;
}

const MainLayout: React.FC<MainLayoutProps> = ({
  isShowNavBar,
  children,
  onLink,
  title,
  navBarRight,
}) => {
  const navigate = useNavigate();
  // const location = useLocation();
  const [pathname, setPathname] = React.useState(location.pathname);
  const tabs = [
    {
      key: "/translate",
      title: "宠物翻译",
      icon: <Translate />,
    },
    {
      key: "/translate/archives",
      title: "情绪监控",
      icon: <Electrocardiogram />,
    },
    {
      key: "/translate/mood",
      title: "我的宠物",
      icon: <GithubOne />,
    },
    // {
    //   key: "/translate/mood",
    //   title: "宠物服务",
    //   icon: <Blossom />,
    // },
    // {
    //   key: "/translate/mood",
    //   title: "个人中心",

    //   icon: <User />,
    // },
  ];

  const setRouteActive = (value: string) => {
    console.log(value);

    setPathname(value);
    navigate(value);
  };

  const goBack = () => {
    // 打印路由栈

    // debugger;
    if (onLink) {
      onLink?.();
    } else {
      navigate(-1);
    }
  };
  return (
    <div className="main-layout">
      <SafeArea position="top" />
      {isShowNavBar ? (
        <NavBar onBack={goBack} right={navBarRight}>
          {title}
        </NavBar>
      ) : (
        ""
      )}
      <div className="layout-content">{children}</div>

      <div className="footer layout-tab">
        <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)} safeArea={true}>
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
};

export default MainLayout;