import { Canvas, Image, Text, View } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro'
import { useCallback, useRef, useState } from 'react'
import { imageAudit } from '@tarojs/taro-h5'
import style from './index.module.scss'
import inviteCodePng from './inviteCode.png'
import QRcode from './inviteCodePopup.png'
import Dialog from '@/components/Dialog'
import LayoutBlock from '@/components/layoutBlock'
import Divider from '@/components/divider'
import type { TablePropsType } from '@/components/table'
import Table from '@/components/table'
import NormalButton from '@/components/normalButton'
import { alert } from '@/common/common'
import { GenBarCodeOrQrCode, GetInvitationInfo } from '@/api'
import { getCDNSource } from '@/common/constant'
// 需要传进来的表头数据示例
const inviteColumns = [
  {
    key: 'invitee',
    title: '被邀请人',
    dataIndex: 'invitee',
    width: '50%',
  },
  {
    key: 'InviteResults',
    title: '邀请进度',
    dataIndex: 'InviteResults',
    width: '50%',
  },
]
// 邀请码
const InviteCode = () => {
  const { fetchData } = GetInvitationInfo()
  const { fetchData: genCode } = GenBarCodeOrQrCode()
  const [inviteInfo, setInviteInfo] = useState<any>({})
  const [currentTable, setCurrentTable] = useState<TablePropsType>({
    columns: inviteColumns,
    dataSource: { list: [], total: 0 },
  })
  const [loading, setLoading] = useState(false)
  // 获取邀请码
  const getInviteCode = async() => {
    const res = await fetchData()
    if (res.success) {
      console.log('getInviteCode', res)
      setCurrentTable((prev: any) => ({
        ...prev,
        dataSource: {
          list: res.data.invitation_record.map((item, index: number) => ({
            key: index,
            index: index + 1,
            invitee: item.name || '--',
            InviteResults: '已邀请',
          })),
          total: res.data.invitation_record.length,
        },
      }))
      setInviteInfo(res.data)
    }
  }
  // 生成二维码
  const genQRcode = async() => {
    const res = await genCode({ content: `InviteCode:${inviteInfo.invitation_code}` })
    if (res.success) {
      return res.data.qrcode_base64
    }
    else {
      setLoading(false)
    }
  }

  const [, setForceUpdate] = useState({})
  const canvasNode = useRef<any>()
  const ctx = useRef<any>(null)
  const [showPopup, setShowPopup] = useState(false)

  const [targetImageUrl, setTargetImageUrl] = useState('')

  const getImageObject = (canvas, src) => {
    return new Promise((resolve, reject) => {
      console.log('getImageObject param', canvas, src)
      const img = canvas.createImage()
      img.src = src
      img.onload = () => {
        console.log('image===>', img)
        resolve(img)
      }
      img.onerror = (err) => {
        console.log('image error===>', err)
        alert.error('图片加载失败')
        reject(err)
      }
    })
  }
  // canvas 生成 图片
  const saveCanvasToImage = (canvas) => {
    Taro.canvasToTempFilePath({
      canvas,
      fileType: 'png',
      success: (res) => {
        console.log('tempFilePath', res.tempFilePath)
        setTargetImageUrl(res.tempFilePath)
      },
      complete: () => {
        setLoading(false)
      },
    })
  }
  const getImageInfo = (filePath) => {
    Taro.getImageInfo({
      src: filePath,
      success: (infoRes) => {
        console.log('', infoRes)
      },
    })
  }
  // 初始化 canvas
  const initCanvas = async() => {
    return new Promise((resolve, reject) => {
      Taro.nextTick(() => {
        const query = Taro.createSelectorQuery()
        query.select('#canvas').node(({ node: canvas }: { node: Taro.Canvas }) => {
          console.log('canvas==>', canvas)
          const context = canvas.getContext('2d')
          console.log('ctx', context)
          canvasNode.current = canvas
          ctx.current = context
          console.log('canvas', canvas)
          setForceUpdate({})
          resolve(true)
        }).exec()
      })
    })
  }
  const startPaint = async(ctx, canvas, image) => {
    console.log('startPaint param', ctx, canvas, image)
    // 开始绘制
    const cCanvasCtx = ctx as any
    cCanvasCtx.clearRect(0, 0, canvas.width, canvas.height)
    cCanvasCtx.drawImage(image, 0, 0, canvas.width, canvas.height)
    cCanvasCtx.save()
    cCanvasCtx.font = `${40}px 微软雅黑`
    cCanvasCtx.fillStyle = '#000000'
    cCanvasCtx.fillText('蜘蛛管家', 40, 80) // text up above canvas
    cCanvasCtx.save()
    cCanvasCtx.font = `${26}px 微软雅黑`
    cCanvasCtx.fillStyle = '#8f9398'
    cCanvasCtx.fillText('真挚邀请您建立合作关系', 40, 130) // text up above canvas
    cCanvasCtx.save()
    cCanvasCtx.font = `${24}px 微软雅黑`
    cCanvasCtx.fillStyle = '#a6a6a6'
    cCanvasCtx.fillText('请前往邀请码页面，进行扫描邀请', 100, 630) // text up above canvas
    cCanvasCtx.save()
    cCanvasCtx.font = `${36}px 微软雅黑`
    cCanvasCtx.fillStyle = '#7f7f7f'
    cCanvasCtx.fillText('邀 请 码', 72, 730) // text up above canvas
    cCanvasCtx.save()
    cCanvasCtx.font = `${24}px 微软雅黑`
    cCanvasCtx.fillStyle = '#cccccc'
    cCanvasCtx.fillText('|', 258, 724) // text up above canvas
    cCanvasCtx.save()
    cCanvasCtx.font = `${36}px 微软雅黑`
    cCanvasCtx.fillStyle = '#7f7f7f'
    cCanvasCtx.fillText(`${inviteInfo.invitation_code}`, 311, 730) // text up above canvas
    cCanvasCtx.save()
    const codeUrl = await genQRcode()
    try {
      const code: any = await getImageObject(canvas, codeUrl)
      cCanvasCtx.drawImage(code, 110, 213, 342, 342)
    }
    catch (err) {
      console.error('合成二维邀请码失败')
      setLoading(false)
      throw new Error('合成二维邀请码失败')
    }

    saveCanvasToImage(canvas)
  }
  // 绘制最终的海报，图片使用两倍大小，canvas大小是图片的二分之一 就能让canvas生成出来的图片清晰了
  const drawPictorial = async() => {
    // eslint-disable-next-line no-async-promise-executor
    return new Promise(async(resolve, reject) => {
      setLoading(true)
      if (!ctx.current) {
        // 重新初始化canvas
        await initCanvas()
      }
      const canvas = canvasNode.current
      Taro.getImageInfo({
        src: getCDNSource('/user/inviteCodePopup.png'),
        success: (res) => {
          canvas.width = res.width / 2
          canvas.height = res.height / 2
          getImageObject(canvas, `${res.path}`).then(async(image) => {
            try {
              // 开始绘制
              await startPaint(ctx.current, canvasNode.current, image)
              resolve(true)
            }
            catch (err) {
              console.log(err)
              setLoading(false)
              reject(new Error('绘制失败'))
            }
          }).catch((error) => {
            setLoading(false)
            throw new Error(error)
          })
        },
      })
    })
  }
  // 加载更多
  const handleLoadMore = () => {

  }
  const handleQRcodeShare = async() => {
    try {
      const flag = await drawPictorial()
      if (flag) {
        setShowPopup(true)
      }
    }
    catch (err) {
      throw new Error('弹出二维码失败')
    }
  }
  // 复制二维码
  const handleCopyInviteCode = () => {
    Taro.setClipboardData({
      data: inviteInfo.invitation_code,
    })
  }
  const handleChange = (value: boolean) => {
    console.log('value', value)

    setShowPopup(value)
  }
  useReady(() => {
    getInviteCode()
    setTimeout(() => {
      initCanvas()
    }, 200)
  })

  return <View className={style.main}>
    <View className={style.content}>
      <View className={style.background}>
        <View className={style.left}>
          <View className={style.title}>蜘蛛管家</View>
          <View className={style.description}>真挚邀请您建立合作关系</View>
        </View>
        <View className={style.right}>
          <View className={style.iconContainer}>
            <Image className={style.icon} src={getCDNSource('/user/inviteCode.png')} mode="widthFix" />
          </View>
        </View>
      </View>
      <LayoutBlock circle customStyle={{ paddingTop: '10px', paddingBottom: '10px' }}>
        <View className={style.codeBar}>
          <View className={style.inviteCodeBar}>
            <View className={style.invite}>邀请码</View>
            <Divider direction="vertical" />
            <View className={style.invite}>{inviteInfo.invitation_code}</View>
          </View>
          <View className={style.tips}>填写邀请码，即可在蜘蛛管家下单购物</View>
        </View>
      </LayoutBlock>
      <LayoutBlock circle customStyle={{ paddingTop: '10px', paddingBottom: '10px' }}>
        <View className={style.inviteListTitle}>
          <View className={style.titleIconLeft}></View>
          <Text className={style.listTitle}>成功邀请</Text>
          <View className={style.titleIconRight}></View>
        </View>
        <View className={style.inviteList}>
          <Table columns={currentTable.columns} emptyText="暂无邀请信息" safeAreaInsetBottom={false} dataSource={currentTable.dataSource} onLoadMore={handleLoadMore}></Table>
        </View>
      </LayoutBlock>
      <View className={style.tips} style={{ justifyContent: 'flex-start' }}>温馨提示：邀请码确定绑定后，不支持解绑。</View>
    </View>
    <Canvas style="position: absolute; left: -9999rpx" id="canvas" canvas-id="canvas" type="2d" />
    <View className={style.bottomBar}>
      <NormalButton loading={loading} plain type="primary" customStyles={{ width: '45%' }} round onClick={handleQRcodeShare}>
          二维码分享
      </NormalButton>
      <NormalButton type="primary" round customStyles={{ width: '45%' }} onClick={handleCopyInviteCode}>
          复制邀请码
      </NormalButton>
    </View>
    <Dialog show={showPopup} onChange={handleChange}>
      <View className={style.codePreview}>
        <View className={style.imageContainer}>
          {/* showMenuByLongpress 属性只对 小程序有效 */}
          <Image className={style.image} src={targetImageUrl} mode="widthFix" id="originImage" showMenuByLongpress />
        </View>
        <Text className={style.previewTips}>长按图片保存到手机</Text>
      </View>
    </Dialog>

  </View>
}
export default InviteCode
