import { forwardRef, useState, useEffect, useImperativeHandle } from "react";
import { View, Button, Image, Text } from "@tarojs/components";
import Taro, { useShareAppMessage } from "@tarojs/taro";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import classnames from "classnames";
import { generateShareImage } from "@/utils";
import DetailService from "@/services/detailService";
import { CommonPopup } from "@/components";
import DownloadIcon from "@/static/detail/download_icon.svg";
import WechatLogo from "@/static/detail/wechat_icon.svg";
// import WechatTimeline from "@/static/detail/wechat_timeline.svg";
import LinkIcon from "@/static/detail/link.svg";
import CrossIcon from "@/static/detail/cross.svg";
import { genNTRPRequirementText, navto } from "@/utils/helper";
import { waitForAuthInit } from "@/utils/authInit";
import { useUserActions } from "@/store/userStore";
import { OSS_BASE } from "@/config/api";
import { generatePosterImage, base64ToTempFilePath, delay } from "@/utils";
import { DayOfWeekMap } from "../../config";
import styles from "./index.module.scss";

dayjs.locale("zh-cn");

// 分享弹窗
export default forwardRef(({ id, from, detail, userInfo }, ref) => {
  const [visible, setVisible] = useState(false);
  const [shareImageUrl, setShareImageUrl] = useState("");
  const { fetchUserInfo } = useUserActions();

  const publishFlag = from === "publish";
  // const posterRef = useRef();
  const { max_participants, participant_count } = detail || {};

  // useEffect(() => {
  //   if (id) {
  //     changeMessageType();
  //   }
  // }, [id]);

  async function changeMessageType() {
    try {
      const res = await DetailService.getActivityId({
        business_id: id,
        business_type: "game",
        is_private: false,
      });
      if (res.code === 0) {
        Taro.updateShareMenu({
          withShareTicket: false, // 是否需要返回 shareTicket
          isUpdatableMessage: true, // 是否是动态消息（需要服务端配置过模版）
          activityId: res.data.activity_id, // 动态消息的活动 id
        });
      }
    } catch (e) {
      Taro.showToast({ title: e.message, icon: "none" });
    }
  }

  useImperativeHandle(ref, () => ({
    show: async () => {
      setVisible(true);
    },
  }));

  useEffect(() => {
    if (from === "publish") {
      generateShareImageUrl().then((url) => {
        setShareImageUrl(url);
        setVisible(true);
      });
    }
  }, [from]);

  async function generateShareImageUrl() {
    const {
      play_type,
      skill_level_max,
      skill_level_min,
      start_time,
      end_time,
      location_name,
      image_list,
    } = detail || {};
    const startTime = dayjs(start_time);
    const endTime = dayjs(end_time);
    const dayofWeek = DayOfWeekMap.get(startTime.day());
    const gameLength = `${endTime.diff(startTime, "hour")}小时`;
    console.log(userInfo, "userInfo");
    const url = await generateShareImage({
      userAvatar: userInfo.avatar_url,
      userNickname: userInfo.nickname,
      gameType: play_type,
      skillLevel: `NTRP ${genNTRPRequirementText(
        skill_level_min,
        skill_level_max,
      )}`,
      gameDate: `${startTime.format("M月D日")} (${dayofWeek})`,
      gameTime: `${startTime.format("ah")}点 ${gameLength}`,
      venueName: location_name,
      venueImages: image_list ? image_list : [],
    });
    return url;
  }

  useShareAppMessage(async (res) => {
    await changeMessageType();
    const url = await generateShareImageUrl();
    // console.log(res, "res");
    return {
      title: detail.title,
      imageUrl: url,
      path: `/game_pages/detail/index?id=${id}&from=share`,
    };
  });

  async function handleGenPoster() {
    const {
      id,
      play_type,
      skill_level_max,
      skill_level_min,
      start_time,
      end_time,
      location_name,
      image_list,
      title,
    } = detail || {};
    // 先等待静默登录完成
    await waitForAuthInit();
    const userInfo = await fetchUserInfo();
    const { avatar_url, nickname } = userInfo;
    const startTime = dayjs(start_time);
    const endTime = dayjs(end_time);
    const dayofWeek = DayOfWeekMap.get(startTime.day());
    const gameLength = `${endTime.diff(startTime, "hour")}小时`;
    // Taro.showLoading({ title: "生成中..." });
    const qrCodeUrlRes = await DetailService.getQrCodeUrl({
      page: "game_pages/detail/index",
      scene: `id=${id}`,
    });
    // const qrCodeUrl = await base64ToTempFilePath(
    //   qrCodeUrlRes.data.qr_code_base64
    // );
    const qrCodeUrl = qrCodeUrlRes.data.ossPath;
    await delay(100);
    // Taro.showLoading({ title: "生成中..." });
    console.log('url', qrCodeUrl)
    const url = await generatePosterImage({
      playType: play_type,
      ntrp: `NTRP ${genNTRPRequirementText(skill_level_min, skill_level_max)}`,
      mainCoursal:
        image_list[0] && image_list[0].startsWith("http")
          ? image_list[0]
          : `${OSS_BASE}/front/ball/images/0621b8cf-f7d6-43ad-b852-7dc39f29a782.png`,
      nickname,
      avatarUrl: avatar_url,
      title,
      locationName: location_name,
      date: `${startTime.format("M月D日")} (${dayofWeek})`,
      time: `${startTime.format("ah")}点 ${gameLength}`,
      qrCodeUrl,
    });

    console.log('urlend', url)
    // Taro.hideLoading();
    Taro.showShareImageMenu({
      path: url,
    });
  }

  async function handlePost() {
    // navto(`/game_pages/sharePoster/index?id=${detail.id}`);
    handleGenPoster();
    setVisible(false);
  }

  async function handleCopyLink() {
    const linkUrlRes = await DetailService.getLinkUrl({
      path: "game_pages/detail/index",
      query: `id=${id}`,
    });
    await Taro.setClipboardData({
      data: linkUrlRes.data.url_link,
    });
    Taro.showToast({ title: "链接已复制到剪贴板", icon: "success" });
    setVisible(false);
  }

  function onClose() {
    setVisible(false);
  }

  return (
    <>
      <CommonPopup
        title="分享至"
        visible={visible}
        onClose={onClose}
        showHeader={false}
        hideFooter
        enableDragToClose={false}
        style={{ minHeight: "100px", background: "unset" }}
        zIndex={1000}
      >
        <View className={styles.shareContainer}>
          {publishFlag && (
            <>
              <View className={styles.opacityContainer} />
              <View className={styles.shareImageContainer}>
                <Image className={styles.shareImage} src={shareImageUrl} />
              </View>
            </>
          )}
          <View
            className={styles.contentContainer}
            style={{
              backgroundImage: `url(${OSS_BASE}/front/ball/images/215f1ce1-be52-4a92-8250-5a4a69e7f2b3.png)`,
            }}
          >
            <View
              catchMove
              className={classnames(
                styles.title,
                publishFlag ? styles.publishTitle : "",
              )}
            >
              {publishFlag ? (
                <Text className={styles.publishText}>球局发布成功 🎉</Text>
              ) : (
                <Text>分享至</Text>
              )}
              <View className={styles.closeIconWrap} onClick={onClose}>
                <Image className={styles.closeIcon} src={CrossIcon} />
              </View>
            </View>
            {publishFlag && (
              <View className={styles.shareTip}>
                <Text>
                  还剩
                  <Text className={styles.specialCount}>
                    {" "}
                    {max_participants - participant_count}{" "}
                  </Text>
                  人加入完成组局， 去邀请好友加入吧～
                </Text>
              </View>
            )}
            <View className={styles.shareItems}>
              <View className={styles.customBtnWrapper}>
                <Button className={styles.button} openType="share">
                  <View className={classnames(styles.icon, styles.wechatIcon)}>
                    <Image className={styles.wechat} src={WechatLogo} />
                  </View>
                  <Text>微信好友</Text>
                </Button>
                <View className={styles.customButton}>
                  <View className={classnames(styles.icon, styles.wechatIcon)}>
                    <Image className={styles.wechat} src={WechatLogo} />
                  </View>
                  <Text>微信好友</Text>
                </View>
              </View>
              <View className={styles.customBtnWrapper}>
                <Button className={styles.button} onClick={handlePost}>
                  <View className={styles.icon}>
                    <Image className={styles.download} src={DownloadIcon} />
                  </View>
                  <Text>生成分享图</Text>
                </Button>
                <View className={styles.customButton}>
                  <View className={styles.icon}>
                    <Image className={styles.download} src={DownloadIcon} />
                  </View>
                  <Text>生成分享图</Text>
                </View>
              </View>
              <View className={styles.customBtnWrapper}>
                <Button className={styles.button} onClick={handleCopyLink}>
                  <View className={styles.icon}>
                    <Image className={styles.linkIcon} src={LinkIcon} />
                  </View>
                  <Text>复制链接</Text>
                </Button>
                <View className={styles.customButton}>
                  <View className={styles.icon}>
                    <Image className={styles.linkIcon} src={LinkIcon} />
                  </View>
                  <Text>复制链接</Text>
                </View>
              </View>
            </View>
          </View>
        </View>
      </CommonPopup>
      {/* <PosterPopup ref={posterRef} id={detail.id} /> */}
    </>
  );
});