"use client";
import React, { useState } from "react";
import { Image, InfiniteScroll, List, Toast, Modal } from "antd-mobile";
import Empty from "@/components/Empty";
import requireAPI from "@/utils/requireAPI";
import clipboard from "copy-to-clipboard";
export default function AlreadyAddWechat({ zid, currentIndex }) {
  const [offset, setOffset] = useState(0);
  const [more, setMore] = useState(1);
  const [data, setData] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);
  const getData = async () => {
    if (zid === undefined || !more || currentIndex != 0) return;
    try {
      const body = {
        tab: 2,
        offset, //如果是下拉刷新则更新最新数据
        limit: 20,
      };
      const _data = await requireAPI("POST", "/api/vas/get_add_wechat_list", {
        body,
      });
      if (_data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: _data.msg,
          position: "top",
        });
        return;
      }
      setData((old) => [...old, ..._data.data.list]);
      setOffset(_data.data.offset);
      setMore(_data.data.more);
    } catch (error) {
      console.error(error);
    }
  };
  //保存内容到剪贴板
  const copy = (_data) => {
    // console.log("_data", _data);
    clipboard(_data);
    Toast.show({
      icon: "success",
      content: "已复制到剪贴板",
      position: "top",
    });
  };
  //单个成员组件
  const RenderItem = ({ item }) => {
    return (
      <div className="flex justify-between items-center">
        <div className="flex items-center">
          <Image
            src={item?.account?.avatar?.images[0]?.urls[0]}
            width={48}
            height={48}
            className="rounded-full"
            placeholder=""
          />
          <div className="ml-2 justify-around ">
            <div className="flex mb-1">
              <span className="text-base text-white font-medium whitespace-nowrap max-w-[70px] truncate">
                {item?.account?.name}
              </span>
              <div className="ml-2 flex items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full">
                <Image
                  src={
                    process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                    "/icons/info/ID.png"
                  }
                  width={14}
                  height={14}
                  className="w-4 h-full mr-1"
                />
                <span className="text-white text-xs font-medium ml-0.5">
                  {item?.account?.user_id}
                </span>
              </div>
            </div>
            <p className="text-xs text-[#FFFFFF80]">请于72小时内添加对方微信</p>
            <p className="text-xs text-[#FFFFFF80]">
              付款时间:{new Date(item?.ct * 1000).toLocaleString()}
            </p>
          </div>
        </div>
        <div
          onClick={() => {
            setModalVisible(!modalVisible);
            Modal.show({
              content: (
                <div
                  onClick={() => setModalVisible(false)}
                  className="flex-1 justify-center items-center bg-[#00000080]"
                >
                  <div className="p-4 rounded-2xl bg-[#1E1C29] items-center">
                    {!item.consumer_wechat ? (
                      <div className="flex flex-col w-full">
                        <div className="flex flex-row items-center justify-center">
                          <Image
                            width={36}
                            height={36}
                            className="rounded-full"
                            src={item?.account?.avatar?.images[0]?.urls[0]}
                            fit="cover"
                          />
                          <span className="text-white text-lg ml-2 font-medium">
                            {item?.account?.name}
                          </span>
                        </div>
                        <span className="mt-2 text-white text-base font-medium">
                          Ta的微信号：
                        </span>
                        <div className="mt-1 flex flex-row bg-[#FFFFFF1A] px-4 py-2 rounded-lg justify-between">
                          <span className="text-white text-base font-medium">
                            {item?.consumer_wechat}
                          </span>
                          <div
                            onClick={() => copy(item?.consumer_wechat)}
                            className="flex items-center"
                          >
                            <Image
                              width={20}
                              height={20}
                              fit="cover"
                              src={
                                process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                                "/icons/copy.png"
                              }
                            />
                            <span className="text-white text-base font-medium">
                              复制
                            </span>
                          </div>
                        </div>
                        <span className="mt-2 text-white text-base font-medium">
                          添加时请备注：
                        </span>
                        <div className="mt-1 flex flex-row bg-[#FFFFFF1A] mb-4 px-4 py-2 rounded-lg justify-between">
                          <span className="text-white text-base font-medium">
                            {item?.consumer_note}
                          </span>
                          <div
                            onClick={() => copy(item?.consumer_note)}
                            className="flex items-center"
                          >
                            <Image
                              width={20}
                              height={20}
                              fit="cover"
                              src={
                                process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                                "/icons/copy.png"
                              }
                            />
                            <span className="text-white text-base font-medium">
                              复制
                            </span>
                          </div>
                        </div>
                      </div>
                    ) : (
                      <div className="flex flex-col">
                        <div className="flex flex-row items-center justify-center">
                          <Image
                            width={36}
                            height={36}
                            className="w-10 h-10 rounded-full"
                            src={item?.account?.avatar?.images[0]?.urls[0]}
                            fit="cover"
                          />
                          <span className="text-white text-lg ml-2 font-medium">
                            {item?.account?.name}
                          </span>
                        </div>
                        <span className="text-white text-base text-center my-2 font-medium">
                          请确认对方已主动添加您的微信，并您已经通过好友申请。
                        </span>
                      </div>
                    )}
                  </div>
                </div>
              ),
              closeOnMaskClick: true,
              bodyStyle: {
                background: "none",
              },
            });
          }}
          className="bg-[#FFFFFF1A] rounded-full px-4 py-2 text-white h-fit text-[14px] whitespace-nowrap"
        >
          {item.order_status === 4 && "已处理"}
          {item.order_status === 5 && "已完成"}
          {item.order_status === 6 && "已退款"}
        </div>
      </div>
    );
  };

  return (
    <div className="flex-1">
      {data.length == 0 && (
        <div className="mt-32">
          <Empty type="nodata" />
        </div>
      )}
      <List style={{ "--padding-left": 0 }}>
        {data.map((item, index) => (
          <List.Item key={index}>
            <RenderItem item={item} />
          </List.Item>
        ))}
      </List>
      <InfiniteScroll loadMore={getData} hasMore={more}>
        {null}
      </InfiniteScroll>
    </div>
  );
}