import React, { memo, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { LoginWrapper } from './style'
import { Input, Button, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import useTimeHandler from '@/hooks/useTimeChange'
import { DebounceBy } from '@/hooks/debounceBy'
import { getSendMessage, getMessageLogin } from '@/api'
import { PhoneCodeLoginParamsType, PhoneCodeLoginType } from '@/types'
message.config({
  top: 400
})
interface IProps {
  children?: ReactNode
}

const Login: FC<IProps> = memo(() => {
  const naviate = useNavigate()

  const [loadingState, setLoadingState] = useState<boolean>(false)

  const [messageApi, contextHolder] = message.useMessage()

  const [form, setForm] = useState<PhoneCodeLoginParamsType>({ phoneNum: '', code: '' })

  const [countdown, startCountdown] = useTimeHandler()

  const warning = (content: string) => messageApi.open({ type: 'warning', content: content })

  const success = (content: string) => messageApi.open({ type: 'success', content: content })

  const sendCodeHandler = DebounceBy(() => {
    if (!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(form.phoneNum))
      return warning('请填写正确的手机号')

    startCountdown(async () => {
      await getSendMessage({ phoneNum: form.phoneNum })

      success('发送成功')
    })
  }, 500)

  const loginHandler = async () => {
    if (!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(form.phoneNum))
      return warning('请填写正确的手机号')

    setLoadingState(true)

    const { result }: { result: PhoneCodeLoginType } = await getMessageLogin(form)

    if (Object.keys(result).length) {
      localStorage.setItem('token', result.token)

      localStorage.setItem('userId', result.userId)

      localStorage.setItem('im_token', result.im_token)

      success('登录成功')

      setTimeout(() => {
        naviate('/discover')

        setLoadingState(false)
      }, 1000)
    }
  }

  return (
    <LoginWrapper>
      {contextHolder}
      <div className="loginBox">
        <div className="title flexC">宠物问诊-兽医端</div>
        <div className="subtitle">账号</div>
        <Input placeholder="请输入手机号" className="inputbox" value={form.phoneNum} onChange={(e) => setForm({ ...form, phoneNum: e.target.value })} />
        <div className="subtitle">验证码</div>
        <Input
          placeholder="请输入密码"
          className="inputbox"
          value={form.code}
          onChange={(e) => setForm({ ...form, code: e.target.value })}
          suffix={
            <div style={{ color: '#05b8d2', fontSize: '17px', cursor: 'pointer' }} onClick={sendCodeHandler}>
              {countdown === 60 ? '获取验证码' : `${countdown}秒后可重新获取`}
            </div>
          }
        />
        <Button className="loginbtn" onClick={loginHandler} loading={loadingState}>
          登录
        </Button>
      </div>
    </LoginWrapper>
  )
})

export default Login