/**
 * 分享弹层
 */

import { useMemo, useRef } from "react";
import { View, Image, Button, RootPortal } from "@tarojs/components";
import style from "./index.module.less";
import IconShareWechat from "@/images/icon-share-wechat.png";
import IconShareQrcode from "@/images/icon-share-qrcode.png";
import ShareWxaCard, {type IShareCard} from "@/components/custom-share/ShareWxaCard/index";
import CustomShare from '../index';
import Popup from "@/components/popup/popup";
import { TAgentDetail } from "@/types/agent";



interface Props {
  show: boolean;
  agent: TAgentDetail | null;
  setShow: (show:boolean) => void;
}
export default ({ show, setShow, agent }: Props) => {
  const shareCardRef = useRef<IShareCard>(null)

  const handleSavePicture = () => {
    console.log(shareCardRef?.current)
    shareCardRef?.current?.saveCardToAlbum(); // 调用子组件的保存方法
  }

  
  
  return (
    <RootPortal>
      {/* 默认要生成分享图, 分享时会主动调用内部逻辑 */}
      {agent && <CustomShare agent={agent} />}

      <Popup show={show} setShow={setShow}>
        {/* 显示分享弹窗后再进行分享逻辑 */}
        <View className={style.container}>
          <View className={style.optionButtons}>
              <View className={style.optionButton}>
                <Image src={IconShareWechat} className={style.icon}></Image>
                <View className={style.buttonText}>微信好友</View>
                <Button openType="share" className="share-button"></Button>
              </View>
              <View className={style.optionButton} onClick={handleSavePicture}>
                <Image src={IconShareQrcode} className={style.icon}></Image>
                <View className={style.buttonText}>保存图片</View>
              </View>
            </View>
            {/* 保存小程序码 */}
            {agent && <ShareWxaCard ref={shareCardRef} agent={agent}></ShareWxaCard>}
        </View>
      </Popup> 
    </RootPortal>
  );
};
