import { useState, useEffect, useRef } from "react";
import { Swiper, SwiperItem, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useSelector } from "react-redux";
import { getSystemParsm } from "@/services/common";
import "./index.scss";
import { ROLE_CODE } from "@/constants/user";
import { useMemo } from "react";

const MINI_KANGYANG = "MINI_KANGYANG";

const list = [
  {
    name: "全部楼盘",
    id: 1,
    icon: require("@/assets/index-icon9.png"),
    router: "/pages/index/buildingList/index",
  },
  {
    name: "品牌地产",
    id: 2,
    icon: require("@/assets/index-icon8.png"),
    router: "/pages/index/brandList/index",
  },
  {
    name: "近期开盘",
    id: 3,
    icon: require("@/assets/index-icon6.png"),
    router: `/pages/index/buildingList/index?isRecentOpening=1`,
  },
  {
    name: "帮我找房",
    id: 4,
    icon: require("@/assets/index-icon1.png"),
    router: "/pages/index/helpToFindHouse/index",
  },
  {
    name: "增值服务",
    id: 5,
    icon: require("@/assets/index-icon16.png"),
    router: "/pages/index/addedValueService/index",
  },
  {
    name: "地图找房",
    id: 6,
    icon: require("@/assets/index-icon2.png"),
    router: "/pages/index/findHouseFromMap/index",
  },
  {
    name: "活动信息",
    id: 7,
    icon: require("@/assets/index-icon5.png"),
    router: "/pages/index/activityList/index?type=dymic",
  },
  {
    name: "团房信息",
    id: 8,
    icon: require("@/assets/index-icon12.png"),
    router: "/pages/index/activityList/index?type=house",
  },
  {
    name: "特价房",
    id: 9,
    icon: require("@/assets/index-icon11.png"),
    router: "/pages/index/specialPriceHouse/index",
  },
  {
    name: "康养",
    id: 10,
    icon: require("@/assets/index-icon7.png"),
    miniapp: MINI_KANGYANG,
  },
  {
    name: "文旅商办",
    id: 11,
    icon: require("@/assets/index-icon13.png"),
    router: `/pages/index/buildingList/index?isCommerce=1`,
  },
  {
    name: "资讯",
    id: 12,
    icon: require("@/assets/index-icon15.png"),
    router: "/pages/index/newsList/index",
  },
  {
    name: "购房百科",
    id: 13,
    icon: require("@/assets/index-icon4.png"),
    router: "/pages/index/encyclopediasOfBuyHouse/index",
  },
  {
    name: "房贷计算",
    id: 14,
    icon: require("@/assets/index-icon3.png"),
    router: "/pages/mine/mortgageCalc/index",
  },
];

const brokerList = [
  {
    name: "我要推荐",
    id: 25,
    icon: require("@/assets/index-icon25.png"),
    router: "/pages/mine/addCustomer/index",
  },
  {
    name: "我的客户",
    id: 23,
    icon: require("@/assets/index-icon23.png"),
    router: "/pages/mine/myCustomer/index",
  },
  {
    name: "邀请好友",
    id: 26,
    icon: require("@/assets/index-icon26.png"),
    router: "/subpackages/pages/broker/invitation/index",
  },
  {
    name: "我的钱包",
    id: 24,
    icon: require("@/assets/index-icon24.png"),
    router: "/subpackages/pages/broker/myWallet/index",
  },
];

export default function Menu() {
  const kangyangRef = useRef();
  const city = useSelector((state) => state.city);

  const [List, setList] = useState(list);

  useEffect(() => {
    // 如果是全民经纪人添加专属菜单
    if (city.curCity.shortname === BROKER_CITY) {
      setList([...brokerList, ...list]);
    } else {
      setList(list);
    }
  }, [city.curCity.shortname]);


  const MenuList = useMemo(() => {
    let Arr = [];
    List.map((item) => {
      if (Arr.length) {
        if (Arr[Arr.length - 1].length < 10) {
          Arr[Arr.length - 1].push({ ...item });
        } else {
          Arr.push([{ ...item }]);
        }
      } else {
        Arr.push([{ ...item }]);
      }
    });
    return Arr
  }, [List]);

  const MenuClick = (item) => {
    return () => {
      if (item.router) {
        Taro.navigateTo({ url: item.router });
      } else if (item.miniapp === MINI_KANGYANG) {
        if (kangyangRef.current) {
          // 跳转到康养小程序
          Taro.navigateToMiniProgram(kangyangRef.current);
        }
      }
    };
  };

  useEffect(() => {
    // 获取康养小程序相关
    getSystemParsm(MINI_KANGYANG).then((res) => {
      if (res && res.paramValue) {
        kangyangRef.current = JSON.parse(res.paramValue);
      }
    });
  }, []);

  return (
    <view className="components Menu">
      <view>
        <view>
          <Swiper autoplay={false} indicator-dots>
            {MenuList.map((item, index) => (
              <SwiperItem key={`Banner-${index}`}>
                <view className="swiper-item">
                  {item.map((subItem, subIndex) => (
                    <view
                      key={`BannerItem-${subIndex}`}
                      onClick={MenuClick(subItem)}
                    >
                      <Image mode="heightFix" src={subItem.icon || null} />
                      <text>{subItem.name}</text>
                    </view>
                  ))}
                </view>
              </SwiperItem>
            ))}
          </Swiper>
        </view>
      </view>
    </view>
  );
}