import React, { useState, useCallback, useEffect } from "react";
import classnames from "../../utils/classnames";
import { HamburgerMenuIcon } from "@radix-ui/react-icons";

/// 普通 Tab 切换组件
const NomalTabs = ({ tabs, initTab, onChangeTab }) => {
  // 获取初始化的tab下标
  const initIndex = tabs.findIndex((tab) => tab === initTab);
  const [activeTab, setActiveTab] = useState(initIndex);
  const [tabPosX, setTabPosX] = useState(0);
  const [isShowTab, setIsShowTab] = useState(false);
  const [showMobileMenu, setShowMobileMenu] = useState(false);

  const handleTabClick = useCallback(
    (index) => {
      setActiveTab(index);
      onChangeTab && onChangeTab(index);
    },
    [onChangeTab]
  );

  /// 计算出初始高亮下标的位置
  useEffect(() => {
    if (activeTab === -1) {
      setActiveTab(0);
    }
    setIsShowTab(tabs.length > 1);
    setTabPosX(((activeTab * 100 + 50) / tabs.length).toFixed(4) + "%");
  }, [activeTab, tabs]);

  return (
    <div className="w-full md:w-auto mt-4 mb-4">
      <div className="flex w-full">
        {/* 桌面端Tabs导航 */}
        <div className=" flex-col flex overflow-hidden">
          <div className="grid grid-flow-col auto-cols-fr">
            {tabs.map((tab, index) => {
              const tabClassName = classnames(
                "mx-2 px-4 py-1 whitespace-nowrap rounded-md cursor-pointer transition duration-150 ease-in-out",
                {
                  "text-blue-500": index === activeTab && isShowTab,
                  "hover:bg-gray-300": index !== activeTab,
                }
              );
              return (
                <div
                  key={index}
                  className={tabClassName}
                  onClick={() => handleTabClick(index)}
                >
                  <center>{tab}</center>
                </div>
              );
            })}
          </div>
          <div>
            <div
              className={`w-10 h-1 bg-blue-500 translate-x-[-50%] duration-300 ${
                isShowTab ? "" : "hidden"
              }`}
              style={{ marginLeft: tabPosX }}
            ></div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default NomalTabs;
