import {FC, useCallback, useEffect, useState} from "react";
import {Form, Input, View} from "@tarojs/components";
import Taro, {useRouter} from "@tarojs/taro";
import {userApi, loginApi, LoginParams, meetingAPi, Meeting} from "@/api";
import {Profile} from '@/store'
import {regexTel} from "@/utils/regu";
import MyButton from "@/components/button/MyButton";

interface Params {
  meeting_id: string
  phone_number?: string
  user_name?: string
}

const MeetingLogin: FC = () => {
  const {setUser, setToken, setCompany} = Profile.useContainer()
  const [codeTime, setCodeTime] = useState(0)
  const [phone_number, setPhone_number] = useState<number | null>()
  const [userName, setUserName] = useState('')
  const [code, setCode] = useState('')
  const [h5params, setH5Params] = useState<LoginParams | null>(null)
  const [meeting, setMeeting] = useState<Meeting | null>(null)
  const params = useRouter().params as unknown as Params

  useEffect(() => {
    loginApi.getMeetingParams().then((res) => {
      setH5Params(res)
    })
    if (params.user_name && params.phone_number) {
      setPhone_number(Number(params.phone_number))
      setUserName(params.user_name)
      Taro.showToast({title: '验证码错误', icon: 'error'})
    }
  }, [])


  useEffect(() => {
    if (codeTime > 0) {
      setTimeout(() => {
        setCodeTime(codeTime - 1)
      }, 1000)
    }
  }, [codeTime])

  Taro.useLoad(() => {
    meetingAPi.meetingInfo(params.meeting_id).then(res => {
      if (res.type !== 1) {
        Taro.showModal({
          title: res.type === 0 ? '暂未开始' : '二维码已过期',
          success() {
            Taro.redirectTo({url: '/pages/login/login'})
          }
        })
        return
      }
      setMeeting(res.data)
    })
  })

  function submit(e) {
    const value = e.detail.value
    if (!value.user_name) {
      Taro.showToast({title: '请写用户名', icon: "error"})
      return
    }

    if (!regexTel.exec(value.phone_number)) {
      Taro.showToast({title: '手机号错误', icon: 'error'})
      return
    }

    if (!value.phone_code) {
      Taro.showToast({title: '请获取手机验证码', icon: 'error'})
      return;
    }

    if (process.env.TARO_ENV === 'h5') {
      if (h5params == null) {
        Taro.showToast({title: '页面参数错误，请刷新页面！', icon: 'error'})
        return;
      }
      location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
        "appid=" + h5params!.appid +
        "&redirect_uri=" +
        encodeURIComponent(
          h5params!.route +
          `?dep_id=${meeting?.dep_id}&company_id=${meeting?.companyId}&phone_number=${value.phone_number}&user_name=${value.user_name}&meeting_id=${params.meeting_id}&phone_code=${value.phone_code}`
        ) +
        "&response_type=code" +
        "&scope=snsapi_userinfo" +
        "#wechat_redirect";
    } else {
      Taro.login({
        success: async (res) => {
          const data = await userApi.meetingSave({
            ...value,
            code: res.code,
            meeting_id: params.meeting_id
          })
          setCompany(data.company)
          setUser(data.user)
          setToken(data.token)
          Taro.switchTab({url: '/pages/index/index'})
        },
        fail: () => {
          Taro.showToast({title: '获取微信登录失败', icon: "error"})
        }
      })
    }
  }

  const getCode = useCallback(async () => {
    if (codeTime > 0) return;
    if (!phone_number || !regexTel.exec(String(phone_number))) {
      Taro.showToast({title: '请输入正确的手机号', icon: 'error'})
      return
    }

    try {
      await userApi.getCode(phone_number)
      Taro.showToast({title: '请注意查收', icon: "none"})
      setCodeTime(60)
    } catch (e) {
      Taro.showToast({title: '获取短信验证码失败', icon: "error"})
    }
  }, [codeTime, phone_number])

  return (
    <View style={{position: 'fixed', top: 0, left: 0, bottom: 0, right: 0, padding: "0 15px", background: '#fff'}}>
      <Form className='form' onSubmit={submit}>

        <View className='item'>
          <View>用户名</View>
          <Input
            placeholder='请输入用户名'
            focus
            name='user_name'
            value={userName}
            onInput={(e) => setUserName(e.detail.value)}/>
        </View>

        <View className='item'>
          <View>手机号</View>
          <Input
            type='number'
            name='phone_number'
            placeholder={'请输入手机号'}
            value={phone_number as unknown as string}
            onInput={(e) => setPhone_number(Number(e.detail.value))}/>
        </View>


        <View className='item'>
          <View>验证码</View>
          <View className='flex flex-1'>
            <Input
              type='number'
              name='phone_code'
              className='flex-1 mr-2'
              value={code}
              onInput={(e) => setCode(e.detail.value)}
              placeholder='输入验证码'/>
            <View onClick={getCode}>
              {codeTime > 0 ? `${codeTime}` : '获取验证码'}
            </View>
          </View>
        </View>

        <MyButton className='mt-3' formType='submit'>登记</MyButton>
      </Form>
    </View>
  )
}


export default MeetingLogin
