import React from "react";
import { NavBar, SafeArea, TabBar, Toast } from "antd-mobile";
import { useNavigate, useLocation } from "react-router-dom";
import { User, CattleZodiac } from "@icon-park/react";
import "./index.less";

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

const MainLayout: React.FC<MainLayoutProps> = ({
  isShowNavBar,
  children,
  onLink,
  title,
}) => {
  const navigate = useNavigate();
  const location = useLocation();
  const { pathname } = location;
  const [activeKey, setActiveKey] = React.useState(pathname);

  const setRouteActive = (value: string) => {
    if (value !== "/") {
      Toast.show("待开发");
    }
  };

  const tabs = [
    {
      key: "/",
      title: "宠物翻译",
      icon: <CattleZodiac />,
    },
    {
      key: "/set",
      title: "待办",
      icon: <User />,
    },
    {
      key: "/message",
      title: "消息",
      icon: <User />,
    },
    {
      key: "/me",
      title: "我的",

      icon: <User size="24" />,
    },
  ];

  const goBack = () => {
    if (onLink) {
      onLink?.();
    } else {
      navigate(-1);
    }
  };
  return (
    <div className="main-layout">
      <SafeArea position="top" />
      {isShowNavBar ? <NavBar onBack={goBack}>{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;