import React, { Component } from "react"
import { http, getParam, browser, SendMessageToApp } from "src/utils"
import PythonDes from "./pythomDes"
import PythonStudy from "./pythonStudy"
import { connect } from "react-redux"
import { addDays } from "date-fns"
import cookie from "js-cookie"
import { setCurrentUser, startFetchUser } from "src/store/userAction"
import { Toast } from "antd-mobile"
import { WxLogin } from "src/common/index"

@connect(
  (state) => ({
    user: state.user,
  }),
  { setCurrentUser, startFetchUser }
)
class ML extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isPay: "",
      buyTry: "",
      userInfoList: [],
      isAppUpdate: false,
      backwardVersion: false, // 默认是新版本
      isWxlogin: false,
    }
  }

  componentDidMount() {
    document.title =
      "机器学习小课 [精讲8大经典算法，在线编程，无需安装环境，会 python 即可学习] - 七月在线"
    const _this = this
    this.fetchCourseInfo()
    // 获取App登录信息
    window["loginInfo"] = (result) => {
      _this.loginInfo(result)
    }

    if (browser.isWeixin && getParam("oid")) {
      this.isweixinPay()
    }
    if (getParam("weixinpay")) {
      this.payCallback()
    }
  }

  // 微信内部支付回调
  isweixinPay = () => {
    let _this = this
    let weixin_code = getParam("code")
    if (weixin_code) {
      if (getParam("oid") === undefined) {
        return
      } else {
        http
          .get(
            `${API["base-api"]}/pay/wxpay/pub_charge/oid/${getParam(
              "oid"
            )}/code/${weixin_code}`
          )
          .then((res) => {
            if (res.data.errno === 0) {
              let data = res.data.data

              function onBridgeReady() {
                WeixinJSBridge.invoke(
                  "getBrandWCPayRequest",
                  {
                    appId: data.appId, //公众号名称，由商户传入
                    timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
                    nonceStr: data.nonceStr, //随机串
                    package: data.package,
                    signType: data.signType, //微信签名方式：
                    paySign: data.paySign, //微信签名
                  },

                  function (res) {
                    if (res.err_msg === "get_brand_wcpay_request:ok") {
                      Toast.info("支付成功", 2)
                      _this.intervalPayStatus = setInterval(function () {
                        http
                          .get(
                            `${API["base-api"]}/m/orderState/oid/${getParam(
                              "oid"
                            )}`
                          )
                          .then((res) => {
                            if (res.data.errno === 401) {
                              clearInterval(_this.intervalPayStatus)
                              _this.intervalPayStatus = null
                              window.location.href = "/ml?id=" + getParam("id")
                            }
                          })
                      }, 1000)
                    }
                  }
                )
              }

              if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                  document.addEventListener(
                    "WeixinJSBridgeReady",
                    onBridgeReady,
                    false
                  )
                } else if (document.attachEvent) {
                  document.attachEvent("WeixinJSBridgeReady", onBridgeReady)
                  document.attachEvent("onWeixinJSBridgeReady", onBridgeReady)
                }
              } else {
                onBridgeReady()
              }
            }
          })
      }
    }
  }
  // 支付完成之后获取状态
  payCallback = () => {
    const _this = this
    // 支付回调
    // 定时器轮训获取订单状态
    _this.intervalPayStatus = setInterval(function () {
      http
        .get(`${API["base-api"]}/m/orderState/oid/${getParam("oid")}`)
        .then((res) => {
          if (res.data.errno === 401) {
            clearInterval(_this.intervalPayStatus)
            _this.intervalPayStatus = null
            window.location.href = "/ml?id=" + getParam("id")
          }
        })
    }, 1000)
  }

  isWxloginFun = (val) => {
    this.setState({ isWxlogin: val })
  }
  // 获取app登录数据
  loginInfo = (result) => {
    this.setState(
      {
        userInfoList: result,
      },
      () => {
        if (this.state.userInfoList.length) {
          this.props.startFetchUser()
          this.appLogin()
        }
      }
    )
  }

  // 保存cookie
  appLogin = () => {
    let expires = addDays(new Date(), 90)
    this.state.userInfoList.forEach((item) => {
      cookie.set("token", item.token, {
        expires,
        path: "/",
        domain: ".julyedu.com",
      })
      cookie.set("plat", item.plat, {
        expires,
        path: "/",
        domain: ".julyedu.com",
      })
      cookie.set("uid", item.uid, {
        expires,
        path: "/",
        domain: ".julyedu.com",
      })
      cookie.set("uname", item.uname, {
        expires,
        path: "/",
        domain: ".julyedu.com",
      })
      cookie.set("avatar_file", item.avatar_file, {
        expires,
        path: "/",
        domain: ".julyedu.com",
      })
    })

    if (cookie.get("token") && cookie.get("uid")) {
      this.setState({
        isAppUpdate: true,
      })
      this.fetchCourseInfo()
    }

    this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
  }

  transformUser = (res) => {
    let payload

    res.forEach((item, index) => {
      payload = {
        hasError: false,
        data: {
          username: item.uname,
          avatar: item.avatar_file,
          token: item.token,
          uid: item.uid,
        },
        isFetching: false,
      }
    })

    return payload
  }

  fetchCourseInfo = () => {
    const id = getParam("id")
    http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
      const { data, code } = res.data
      if (code === 200) {
        let version = getParam("version")
        if (version) {
          version = version.replace(/\./g, "").slice(0, 3)
          if (browser.isAndroidApp && version < 453) {
            // 安卓的低版本
            this.setState({
              backwardVersion: true,
              isPay: 0,
            })
          } else if (browser.isIOSApp && version < 380) {
            // ISO的低版本
            this.setState({
              backwardVersion: true,
              isPay: 0,
            })
          } else {
            // 安卓/IOS 的高版本
            if (data.course_info.is_pay === 1) {
              // 在APP内未登录-去登陆-登录后还显示此页；如果是已购买的用户 就需要跳转到 APP已购买的原生页面
              SendMessageToApp("toSyllabusChapter", id) // 跳转到APP的已购买详情页 id 是课程ID
              return
            }
            this.setState({
              backwardVersion: false,
              isPay: data.course_info.is_pay,
            })
          }
        } else {
          this.setState({
            backwardVersion: false,
            isPay: data.course_info.is_pay,
            buyTry: data.course_info.buy_try,
          })
        }
      }
    })
  }

  render() {
    const {
      isPay,
      buyTry,
      isAppUpdate,
      backwardVersion,
      isWxlogin,
    } = this.state
    // 旧版本 无论购买未购买 都跳转到 未购买的详情页； 如果是已购买就提示更新APP
    return (
      <div>
        {isPay === 0 && buyTry === 0 && (
          <PythonDes
            backwardVersion={backwardVersion}
            isWxloginFun={this.isWxloginFun.bind(this)}
            history={this.props.history}
            isAppUpdate={isAppUpdate}
            isPay={isPay}
            buyTry={buyTry}
          />
        )}
        {(isPay === 1 || buyTry === 1) && !getParam("version") && (
          <PythonStudy isAppUpdate={isAppUpdate} buyTry={buyTry} />
        )}

        {isWxlogin && <WxLogin history={this.props.history} />}
      </div>
    )
  }
}

export default ML