import { Button, Canvas, Image } from '@tarojs/components';
import Taro, { useShareAppMessage } from '@tarojs/taro';

import { PageUrl } from '@/constants/app';
import useInviteCode from '@/hooks/use-invite-code';
import { generateMembershipCoupon, getCouponQrCode } from '@/utils/coupon';
import { getCommonShareMessage } from '@/utils/share';

import './index.less';

const PREFIX = 'share-vip';

export default function PartnerShareVip() {
  const inviteCode = useInviteCode();

  Taro.showShareMenu({
    withShareTicket: true,
  });

  useShareAppMessage(async () => {
    console.log('Partner inviteCode', inviteCode);
    const { code } = await generateMembershipCoupon();
    return getCommonShareMessage({
      useCapture: false,
      inviteCode,
      title: '宝子，送你个播络会员，免费找主播工作',
      path: PageUrl.GiveVip,
      params: { d: code },
      imageUrl: 'https://publiccdn.neighbourhood.com.cn/img/share-coupon1.png',
    });
  });

  const getQrcode = async () => {
    try {
      const { code } = await generateMembershipCoupon();
      const data = await getCouponQrCode(code);
      const base64 = Taro.arrayBufferToBase64(data);
      return `data:image/png;base64,${base64}`;
    } catch (error) {
      console.error('获取二维码失败', error);
      Taro.showToast({ title: '获取二维码失败', icon: 'none' });
      throw error;
    }
  };
  const saveCanvasToTempFile = (): Promise<string> => {
    return new Promise((resolve, reject) => {
      try {
        const query = Taro.createSelectorQuery().select('#posterCanvas');
        query.fields({ node: true }).exec(async res => {
          const canvas = res[0].node;
          const tempFilePath = await Taro.canvasToTempFilePath({
            canvas,
            x: 0,
            y: 0,
            width: 1500, // 实际绘制宽度
            height: 2668, // 实际绘制高度
            destWidth: 750, // 目标显示宽度
            destHeight: 1334, // 目标显示高度
            fileType: 'png',
          });

          resolve(tempFilePath.tempFilePath);
        });
      } catch (error) {
        console.error('保存 Canvas 到临时文件失败', error);
        Taro.showToast({ title: '保存 Canvas 失败', icon: 'none' });
        reject(error);
      }
    });
  };
  const drawCanvas = (qrCode: string): Promise<string> => {
    const query = Taro.createSelectorQuery().select('#posterCanvas');
    return new Promise(resolve => {
      query.fields({ node: true, size: true }).exec(async res => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');

        canvas.width = 550 * 2;
        canvas.height = 918 * 2;
        ctx.scale(2, 2);

        // 绘制背景图片
        const bgImage = canvas.createImage();
        const poster = 'https://publiccdn.neighbourhood.com.cn/img/share-coupon-poster2.png';
        bgImage.src = poster;
        bgImage.onload = () => {
          ctx.drawImage(bgImage, 0, 0, 550, 918);

          const qrCodeImage = canvas.createImage();
          qrCodeImage.src = qrCode; // 假设 getQrcode() 返回的是二维码图片的路径
          qrCodeImage.onload = () => {
            ctx.drawImage(qrCodeImage, 196, 600, 180, 160); // 绘制二维码，位置和大小
            saveCanvasToTempFile().then(tempPath => {
              resolve(tempPath);
            });
          };
        };
        bgImage.onerror = err => {
          console.error(err);
        };
      });
    });
  };
  const savePoster = async () => {
    Taro.showLoading({ title: '正在生成海报' });
    const qrCode = await getQrcode();
    const filePath = await drawCanvas(qrCode);
    Taro.hideLoading();

    const res = await Taro.getSetting();
    const hasPermission = res.authSetting['scope.writePhotosAlbum'];
    if (hasPermission === false) {
      Taro.showModal({
        title: '提示',
        content: '需要访问相册权限才能保存图片，请前往设置开启权限',
        showCancel: false,
        success() {
          Taro.openSetting();
        },
      });
    } else {
      try {
        await Taro.authorize({ scope: 'scope.writePhotosAlbum' });
        await Taro.saveImageToPhotosAlbum({ filePath });
        Taro.showToast({ title: '保存成功', icon: 'success' });
      } catch (error) {
        console.error(error);
        Taro.showToast({ title: '保存失败', icon: 'none' });
      }
    }
  };

  return (
    <div className={PREFIX}>
      <Image
        src="https://publiccdn.neighbourhood.com.cn/img/partner-share-vip-bg.png"
        className={`${PREFIX}__bg`}
        mode="aspectFill"
      />
      <div className={`${PREFIX}__slogan`}>
        <div>
          会员可每日<div className={`${PREFIX}__slogan-highlight`}>免费查看</div>
        </div>
        <div>通告联系方式</div>
      </div>
      <div className={`${PREFIX}__main`}>
        <div className={`${PREFIX}__block`}>
          <div className={`${PREFIX}__title`}>赠送会员</div>
          <div className={`${PREFIX}__card`}>
            <div className={`${PREFIX}__h1`}>方法一：</div>
            <div className={`${PREFIX}__body`}>点击下方&#34;立即赠送&#34;即可分享赠送卡片，对方点击卡片即可领取</div>
            <div className={`${PREFIX}__h1`}>方法二：</div>
            <div className={`${PREFIX}__body`}>点击&#34;朋友圈海报&#34;获得图片，分享到朋友圈，对方扫码即可领取</div>
          </div>
        </div>
        <div className={`${PREFIX}__block`}>
          <div className={`${PREFIX}__title`}>赠送规则</div>
          <div className={`${PREFIX}__card`}>
            <div className={`${PREFIX}__body`}>
              <div className={`${PREFIX}__h1`}>规则一：</div>
              <div>每次分享的赠送链接或者图片在7天内有效</div>
              <div className={`${PREFIX}__h1`}>规则二：</div>
              <div>每个用户一周最多只能领取一次会员</div>
            </div>
          </div>
        </div>
        <div className={`${PREFIX}__block`}>
          <div className={`${PREFIX}__title`}>分享建议</div>
          <div className={`${PREFIX}__card`}>
            <div className={`${PREFIX}__body`}>
              <div className={`${PREFIX}__h1`}>建议一：</div>
              <div>每周在朋友圈或者群中分享一次，效果最佳 可以写明：新会员来啦</div>
              <div className={`${PREFIX}__h1`}>建议二：</div>
              <div>分享得越多，邀请的人会越多，也会更活跃，更容易获得分成</div>
            </div>
          </div>
        </div>
      </div>
      <Canvas id="posterCanvas" canvas-id="posterCanvas" type="2d" style="width: 750px; height: 1334px;" />

      <div className={`${PREFIX}__footer`}>
        <Button className={`${PREFIX}__download-button`} onClick={savePoster}>
          朋友圈海报
        </Button>
        <Button className={`${PREFIX}__share-button`} openType="share">
          立即赠送
        </Button>
      </div>
    </div>
  );
}