"use client";
import React, { useState, useRef, useMemo } from "react";
import { Tabs, Swiper } from "antd-mobile";
import AllSpaceMember from "./components/AllSpaceMember";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faSearch } from "@fortawesome/free-solid-svg-icons";
import { useRouter, useSearchParams } from "next/navigation";
import styles from "./index.module.scss";
import IronfanSpaceMember from "./components/IronfanSpaceMember";
import SuperFanSpaceMember from "./components/SuperFanSpaceMember";
const tabItems = [
  { key: "all", title: "全部成员" },
  { key: "ironFan", title: "空间铁粉" },
  { key: "superFan", title: "空间超粉" },
];
export default function SpaceMember() {
  const swiperRef = useRef(null);
  const router = useRouter();
  const params = useSearchParams();
  const [activeIndex, setActiveIndex] = useState(0);
  const zid = Number(params.get("zid"));
  const allSpaceMember = useMemo(
    () => <AllSpaceMember zid={zid} currentIndex={activeIndex} />,
    [activeIndex]
  );
  const ironfanSpaceMember = useMemo(
    () => <IronfanSpaceMember zid={zid} currentIndex={activeIndex} />,
    [activeIndex]
  );
  const superFanSpaceMember = useMemo(
    () => <SuperFanSpaceMember zid={zid} currentIndex={activeIndex} />,
    [activeIndex]
  );
  return (
    <div>
      <div className="p-4 fixed top-0 z-10 w-full flex justify-between items-center bg-black">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full">
          <FontAwesomeIcon
            icon={faAngleLeft}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">空间成员</p>
        <FontAwesomeIcon
          icon={faSearch}
          style={{ maxWidth: "17px" }}
          size="lg"
          onClick={() => router.push("spaceSearch")}
        />
      </div>
      <Tabs
        style={{ "--active-title-color": "#fff", position: "sticky" }}
        className={`w-full bg-black text-[#ffffff40] sticky top-14 z-40 ${styles.customTabs} `}
        activeKey={tabItems[activeIndex].key}
        onChange={(key) => {
          const index = tabItems.findIndex((item) => item.key === key);
          setActiveIndex(index);
          swiperRef.current?.swipeTo(index);
        }}
      >
        {tabItems.map((item) => (
          <Tabs.Tab destroyOnClose={true} title={item.title} key={item.key} />
        ))}
      </Tabs>
      <div className="pt-16 p-4 flex flex-col justify-center items-center">
        <Swiper
          direction="horizontal"
          loop
          indicator={() => null}
          ref={swiperRef}
          defaultIndex={activeIndex}
          onIndexChange={(index) => {
            setActiveIndex(index);
          }}
        >
          <Swiper.Item
            className={`${activeIndex == 0 ? "" : "absolute"} min-h-screen`}
          >
            {allSpaceMember}
          </Swiper.Item>
          <Swiper.Item
            className={`${activeIndex == 1 ? "" : "absolute"} min-h-screen`}
          >
            {ironfanSpaceMember}
          </Swiper.Item>
          <Swiper.Item
            className={`${activeIndex == 2 ? "" : "absolute"} min-h-screen`}
          >
            {superFanSpaceMember}
          </Swiper.Item>

          {/* <Swiper.Item>{activeIndex == 0 && allSpaceMember}</Swiper.Item>
          <Swiper.Item>{activeIndex == 1 && ironfanSpaceMember}</Swiper.Item>
          <Swiper.Item>{activeIndex == 2 && superFanSpaceMember}</Swiper.Item> */}
        </Swiper>
      </div>
    </div>
  );
}