import { CoverView } from "@tarojs/components";
import Taro from "@tarojs/taro";
import {clsx} from "clsx";
import { useRecoilState, useSetRecoilState } from "recoil";
import { tabbarModel, tabbarParamModel } from "@/model/tabbar.model";
import { throttle } from "@tarojs/runtime";

import './index.css';

const CustomTabBar = () => {
  const [active, setActive] = useRecoilState(tabbarModel);

  const setParam = useSetRecoilState(tabbarParamModel);
  const handlerClick = throttle((index: number) => {
    if (active == index) return;
    setActive(index);
    switch (index) {
      case 1:
        Taro.switchTab({
          url: '/pages/index/index',
        })
        break;
      case 2:
        setParam("自定义页面产品")
        Taro.switchTab({
          url: '/pages/cpage/index',
        })
        break;
      case 3:
        setParam("自定义页面案例")
        Taro.switchTab({
          url: '/pages/cpage/index',
        })
        break;
      case 4:
        Taro.switchTab({
          url: '/pages/user/index',
        })
        break;
      default:
        break;
    }
  }, 1000)

  return (
    <CoverView className="footer_bg">
        <CoverView className="footer_box">
            <CoverView className={clsx('item', active == 1 ? 'active_text': 'text')} onClick={() => handlerClick(1)}>首页</CoverView>
            <CoverView className={clsx('item', active == 2 ? 'active_text': 'text')} onClick={() => handlerClick(2)}>产品</CoverView>
            <CoverView className={clsx('item', active == 3 ? 'active_text': 'text')} onClick={() => handlerClick(3)}>案例</CoverView>
            <CoverView className={clsx('item', active == 4 ? 'active_text': 'text')} onClick={() => handlerClick(4)}>我的</CoverView>
        </CoverView>
        <CoverView className="safe_bottom"></CoverView>
    </CoverView>
  );
}

CustomTabBar.options = {
  addGlobalClass: true,
}

export default CustomTabBar;