import Taro from '@tarojs/taro'
import React, { useEffect, useState, useCallback, useRef, useImperativeHandle } from 'react'
import { View, Text, Button, ScrollView } from '@tarojs/components'
import { AtButton, AtCurtain } from 'taro-ui'
import { useImmer } from 'use-immer'
import S from '@/spx'
import api from '@/api'
import { isWeixin, isAlipay, classNames, showToast, entryLaunch } from '@/utils'
import { SG_SHARER_UID, SG_TRACK_PARAMS, SG_ROUTER_PARAMS, SG_GUIDE_PARAMS } from '@/consts'
import { Tracker } from '@/service'
import { SpPrivacyModal, SpImage, SpCheckbox } from '@/components'
import { useLogin } from '@/hooks'
import './index.scss'


const initialState = {
  logo: '',
  registerName: '',
  privacyName: '',
  agreeMentChecked: false
}
function SpLogin (props, ref) {
  const { children, className, onChange, newUser = false } = props
  const { isLogin, login, setToken, checkPolicyChange } = useLogin({
    policyUpdateHook: (isUpdate) => {
      // isUpdate && setPolicyModal(true)
    }
  })
  const [isNewUser, setIsNewUser] = useState(false)
  const [policyModal, setPolicyModal] = useState(false)
  const [loginModal, setLoginModal] = useState(false)
  const [state, setState] = useImmer(initialState)
  const { logo, registerName, privacyName, agreeMentChecked } = state
  const codeRef = useRef()

  useEffect(() => {
    if (newUser) {
      setIsNewUser(true)
    }
  }, [newUser])

  useEffect(() => {
    if (loginModal) {
      fetchPrivacyData()
      Taro.login({
        success: ({ code }) => {
          codeRef.current = code
        },
        fail: (e) => {
          console.error('[sp-login] taro login fail:', e)
        }
      })
    }
  }, [loginModal])

  const fetchPrivacyData = async () => {
    const { logo, protocol } = await api.shop.getStoreBaseInfo()
    const { member_register, privacy } = protocol
    setState(draft => {
      draft.logo = logo
      draft.registerName = member_register
      draft.privacyName = privacy
    })

  }

  const handleBindPhone = async (e) => {
    setLoginModal(false)
    const { encryptedData, iv, cloudID } = e.detail
    if (encryptedData && iv) {
      const code = codeRef.current
      let params = {
        code,
        encryptedData,
        iv,
        cloudID,
        user_type: 'wechat',
        auth_type: 'wxapp'
      }
      // 内购分享码
      const { code: purchaseCode } = Taro.getStorageSync(SG_ROUTER_PARAMS)
      if (purchaseCode) {
        params = {
          ...params,
          purchanse_share_code: purchaseCode
        }
      }
      Taro.showLoading({ title: '' })

      // const { uid } = entryLaunch.getLaunchParams()
      const { uid, dtid } = Taro.getStorageSync(SG_ROUTER_PARAMS)
      const { gu_user_id } = Taro.getStorageSync(SG_GUIDE_PARAMS)
      if (uid) {
        // 分销绑定
        params['uid'] = uid
      }
      if (dtid) {
        params['distributor_id'] = dtid
      }
      // gu_user_id: 欢迎语上带过来的员工编号, 同work_user_id
      if (gu_user_id) {
        params['channel'] = 1
        params['work_userid'] = gu_user_id
      }

      try {
        const { token, is_new } = await api.wx.newlogin(params)
        if (token) {
          setToken(token)
          Taro.hideLoading()
          setLoginModal(false)
          showToast('恭喜您，注册成功')
          onChange && onChange()
        } else {
          showToast('注册失败')
        }
      } catch (error) {
        Taro.hideLoading()
      }
    }
  }

  const handleCloseModal = useCallback(() => {
    setPolicyModal(false)
  }, [])

  // 同意隐私协议
  const handleConfirmModal = useCallback(async () => {
    setPolicyModal(false)
    handleUserLogin()
    // if (isNewUser) {
    //   return setLoginModal(true)
    // } else {
    //   try {
    //     await login()
    //   } catch (e) {
    //     setLoginModal(true)
    //   }
    // }
  }, [])

  // 登录
  const handleClickLogin = async (e) => {
    e.stopPropagation()
    const { scene } = Taro.getLaunchOptionsSync()
    // 微信朋友圈打开场景
    if (scene == 1154) {
      return showToast('请前往小程序使用完整服务')
    }
    // const checkRes = await checkPolicyChange()
    // if (!checkRes) {
    //   setPolicyModal(true)
    //   return
    // }
    if (isLogin) {
      onChange && onChange()
    } else {
      setLoginModal(true)
    }
  }

  // 已注册会员登录
  const handleUserLogin = async () => {
    try {
      await login()
      setLoginModal(false)
      onChange && onChange()
    } catch (e) {
      setIsNewUser(true)
    }
  }

  useImperativeHandle(ref, () => ({
    _setPolicyModal: () => {
      setPolicyModal(true)
    }
  }))

  const handleClickPrivacy = (type) => {
    Taro.navigateTo({
      url: `/subpages/auth/reg-rule?type=${type}`
    })
  }

  const onChangePayment = (e) => {
    setState(draft => {
      draft.agreeMentChecked = e
    })
  }

  // eslint-disable-next-line no-undef
  const { icon, nickname } = __wxConfig.accountInfo

  return (
    <View className={classNames('sp-login', className)}>
      <View onClick={handleClickLogin}>{children}</View>

      {/* 隐私协议 */}
      {/* <SpPrivacyModal
        open={policyModal}
        onCancel={handleCloseModal}
        onConfirm={handleConfirmModal}
      /> */}

      {/* 授权登录 */}
      <AtCurtain
        className='curtain'
        isOpened={loginModal}
        onClose={() => {
          setLoginModal(false)
        }}
      >
        {/* <View className='login-modal'>
          <View className='login-modal__hd'>
            <SpImage circle src={icon} width={120} height={120} />
            <View className='nick-name'>{nickname}</View>
          </View>
          <View className='login-modal__bd'>登录手机号，查看全部订单和优惠券</View>
          <View className='agreement-content'>
            <SpCheckbox
              checked={agreeMentChecked}
              onChange={onChangePayment}
            />
            <View className="agreement-list">
              <Text className='agreement-name' onClick={handleClickPrivacy.bind(this, 'member_register')}>《{registerName}》</Text>和
              <Text className='agreement-name' onClick={handleClickPrivacy.bind(this, 'privacy')}>《{privacyName}》</Text>
            </View>
          </View>
          <View className='login-modal__ft'>
            {isNewUser && <AtButton type='primary' disabled={!agreeMentChecked} openType='getPhoneNumber' onGetPhoneNumber={handleBindPhone}>
              登录
            </AtButton>}
            {!isNewUser && <AtButton type='primary' disabled={!agreeMentChecked} onClick={handleUserLogin}>
              登录
            </AtButton>}
          </View>
        </View> */}
        {<View className="curtain_content">
          <View className="curtain_content_title">
            <SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
            <View className="">隐私政策</View>
          </View>
          <ScrollView scrollY
            scrollWithAnimation className="curtain_content_text" showScrollbar={false} enhanced>
            亲爱的用户,感谢您使用Birkenstock微信小程序!为了加强对您个人信息的保护,我们根据最新法律的要求制定/更新了
            <View className="agreement-list">
              <Text className='agreement-name' onClick={handleClickPrivacy.bind(this, 'member_register')}>《{registerName}》</Text>和
              <Text className='agreement-name' onClick={handleClickPrivacy.bind(this, 'privacy')}>《{privacyName}》</Text>
            </View>,我们将基于合法以及正当必要的原则,按照本政策的规定向您提供各项服务
            <View>
              本政策旨在向您说明休迪贸易 (上海)有限公司及其在中国大陆境内的线上线下门店如何收集、使用、传输和保护您的个人信息
              通过《隐私政策》,我们向您主要说明:
            </View>
            <View className="">
              1.您在使用Birkenstock微信小程序时,可以选择浏览模式,也可以选择注册/登录成为Birkenstock微信小程序用户
            </View>
            <View className="">
              2为了向你提供Birkenstock微信小程序的其本服条,我们将基于合法以及正当必要的原则,按照本政策的规定向您提供各项服务
            </View>
          </ScrollView>
          <View className='btn-wrap'>
            {isNewUser && <AtButton className='btn' type='primary' openType="getPhoneNumber" onGetPhoneNumber={handleBindPhone
            }>
              同意并继续
            </AtButton>}
            {!isNewUser && <AtButton className='btn' type='primary' onClick={handleUserLogin}>
              同意并继续
            </AtButton>}
          </View>
          <View className="no-btn" onClick={() => setLoginModal(false)}>不同意</View>
          <View className="no-text">
            *如果您不同意Birkenstock隐私政策，您可继续浏览小程序，但您无法使用购物结算功能
          </View>
        </View>}
      </AtCurtain>
    </View>
  )
}

SpLogin.options = {
  addGlobalClass: true
}

export default React.forwardRef(SpLogin)