import {useEffect, useState} from "react";
import Taro from '@tarojs/taro'
import {Radio, Button} from '@nutui/nutui-react-taro'
import {createWxLoginHandler} from '@/utils/wxLogin'
import {TenantId} from "@/utils/config";

const Login = () => {
  const [isAgree, setIsAgree] = useState(false)

  const reload = () => {
    Taro.hideTabBar()
  };

  const showAuthModal = () => {
    Taro.showModal({
      title: '授权提示',
      content: '需要获取您的用户信息',
      confirmText: '去授权',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          // 用户点击确认，打开授权设置页面
          openSetting();
        }
      }
    });
  };

  const openSetting = () => {
    // Taro.openSetting：调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。
    Taro.openSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          // 用户授权成功，可以获取用户信息
          reload();
        } else {
          // 用户拒绝授权，提示授权失败
          Taro.showToast({
            title: '授权失败',
            icon: 'none'
          });
        }
      }
    });
  };

  // 创建微信登录处理函数
  const handleGetPhoneNumber = createWxLoginHandler({
    onSuccess: (user) => {
      console.log('登录成功:', user);
      // 可以在这里添加额外的成功处理逻辑
    },
    onError: (error) => {
      console.error('登录失败:', error);
    },
    showToast: true,
    navigateBack: true,
    tenantId: TenantId
  });


  useEffect(() => {
    reload()
    // Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
    Taro.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          // 用户已经授权过，可以直接获取用户信息
          console.log('用户已经授权过，可以直接获取用户信息')
          reload();
        } else {
          // 用户未授权，需要弹出授权窗口
          console.log('用户未授权，需要弹出授权窗口')
          showAuthModal();
        }
      }
    });
  }, []);

  return (
    <>
      <div className={'flex flex-col justify-center px-5 pt-5'}>
        <div className={'text-3xl text-center py-5 font-normal my-10'}>快捷登录</div>

        <>
          <div className={'flex justify-center my-5 rounded-lg'} style={{
            backgroundColor: isAgree ? '#9a23d4' : '#c0c4cc',
          }}>
            <Button
              type="info" size={'large'}
              className={'w-full rounded-lg p-2'}
              disabled={!isAgree}
              open-type="getPhoneNumber"
              onGetPhoneNumber={handleGetPhoneNumber}>手机号一键登录</Button>
          </div>
        </>

        <div className={'my-2 flex text-sm items-center px-1'}>
          <Radio style={{color: '#333333'}} checked={isAgree} onClick={() => setIsAgree(!isAgree)}></Radio>
          <span className={'text-gray-400'} onClick={() => setIsAgree(!isAgree)}>勾选表示您已阅读并同意</span><a
          onClick={() => Taro.navigateTo({url: '/passport/agreement'})}
          className={'text-purple-700'}>《服务协议及隐私政策》</a>
        </div>
      </div>
    </>
  )
}
export default Login