"use client";
import React, { useState, useRef, useMemo } from "react";
import { Tabs, Swiper } from "antd-mobile";
import AlreadyAddWechat from "./components/AlreadyAddWechat";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import { useRouter, useSearchParams } from "next/navigation";
import styles from "./index.module.scss";
import HaveNotAddWechat from "./components/HaveNotAddWechat";
const tabItems = [
  { key: "havenot", title: "待添加" },
  { key: "already", title: "已完成" },
];
export default function WechatWaitingToAdd() {
  const swiperRef = useRef(null);
  const router = useRouter();
  const params = useSearchParams();
  const [activeIndex, setActiveIndex] = useState(0);
  const zid = Number(params.get("zid"));
  const already = useMemo(
    () => <AlreadyAddWechat zid={zid} currentIndex={activeIndex} />,
    [activeIndex]
  );
  const havenot = useMemo(
    () => <HaveNotAddWechat zid={zid} currentIndex={activeIndex} />,
    [activeIndex]
  );
  return (
    <div>
      <div className="p-4 fixed top-0 z-10 w-full bg-black">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">待添加微信</p>
      </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`}
          >
            {havenot}
          </Swiper.Item>
          <Swiper.Item
            className={`${activeIndex == 1 ? "" : "absolute"} min-h-screen`}
          >
            {already}
          </Swiper.Item>
        </Swiper>
      </div>
    </div>
  );
}