import Taro, { useLoad, useReady } from '@tarojs/taro'
import { View, Video, Navigator, Button, FunctionalPageNavigator } from '@tarojs/components'
import './index.less'
import React, { PropsWithChildren } from 'react'

const Custom: React.FC = (props: PropsWithChildren<CustomPropsType>) => {
  function clickCustom() {
    console.log(props)
  }

  const customWidth = props.width

  useReady(() => {
    Taro.request({
      url: 'https://api.piaoquantv.com/ad/self/inAbPredict',
      method: 'POST',
      success(res) {
        console.log(res)
      },
      fail(err) {
        console.log(err)
      }
    })
  })

  function clickPayment() {
    console.log('支付')
    wx.requestPluginPayment({
      version: 'develop',
      fee: 1,
      success(res) {
        console.log('success', res)
      },
      fail(res) {
        console.log('fail', res)
      }
    })
  }

  function loginSuccess(res) {
    console.log(res)
  }

  function loginFail(res) {
    console.log(res)
  }

  return (
    <View onClick={clickCustom} style={{width: customWidth + 'px'}}>
      <Navigator url='plugin-private://wxf7261ed54f2e450e/pages/h5/index'>
        <Button>H5</Button>
      </Navigator>

      <Navigator url='plugin-private://wxf7261ed54f2e450e/pages/miniWeb/index'>
        <Button>半屏</Button>
      </Navigator>

      <Navigator url='plugin-private://wxf7261ed54f2e450e/pages/webview/index'>
        <Button>全屏</Button>
      </Navigator>

      <Navigator url='plugin-private://wxf7261ed54f2e450e/pages/webview/index'>
        {/* <Video autoplay controls={false} loop src='https://xycdn.yishihui.com/ad/prod/video/material_AD_1700025739_1700025739924.mp4' /> */}
      </Navigator>
      <Button onClick={clickPayment}>支付</Button>
      <FunctionalPageNavigator
        name="loginAndGetUserInfo"
        version="develop"
        onSuccess={loginSuccess}
        onFail={loginFail}
      >
        <Button className="login">登录到插件</Button>
      </FunctionalPageNavigator>
    </View>
  )
}

export default Custom
