import { Image, Input, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import type { FC } from 'react'
import { memo, useState } from 'react'
import styles from './index.module.scss'
import Divider from '@/components/divider'
import IconFont from '@/components/iconfont/iconfont'
import MCheckbox from '@/components/checkbox'
import NormalButton from '@/components/normalButton'
import IconCard from '@/components/iconCard'
import { LoginApi } from '@/api'
import { alert } from '@/common/common'
import useUserInfo from '@/use/useUserInfo'

const QuickLogin: FC = () => {
  return (
    <View className={styles['quick-login']}>
      <Divider direction="horizontal" customClassName={styles['quick-login--divider']}>
        或通过以下方式登录
      </Divider>
      <View className={styles['quick-login--options']}>
        <IconCard iconName="icon-weixindenglu" title="微信登录" customClass={styles['quick-login--iconCard']}></IconCard>
      </View>
    </View>
  )
}
const QuickLoginWithMemo = memo(QuickLogin)
const Login: FC = () => {
  const [isRemember, setRemember] = useState(false)

  const [eyesStatus, setEyesStatus] = useState(true)

  const handlePwdVisible = () => {
    setEyesStatus(value => !value)
  }

  const selectCallBack = () => {
    console.log('selectCallBack')
    setRemember(true)
  }
  const closeCallBack = () => {
    setRemember(false)
    console.log('closeCallBack')
  }

  const [account, setAccount] = useState('')
  const [password, setPassword] = useState('')

  const formatInput = (value: string) => {
    return value.trim()
  }

  const handleInputAccount = (event: any) => {
    const formated = formatInput(event.detail.value)
    setAccount(formated)
  }
  const handleInputPassword = (event: any) => {
    const formated = formatInput(event.detail.value)
    setPassword(formated)
  }

  const { setToken, setUserInfo } = useUserInfo()

  const { fetchData } = LoginApi()

  const handleLogin = async() => {
    if (account === '' || password === '') { return alert.error('账号密码不能为空！') }
    console.log('账户密码：', account, password)
    const res = await fetchData({
      account,
      password,
    })
    if (res.success) {
      alert.success('登陆成功')
      setToken(res.data.token)
      setUserInfo({ ...res.data })

      Taro.switchTab({
        url: '/pages/index/index',
      })
    }
    else {
      alert.error('登陆失败')
    }
  }
  // 处理忘记密码的逻辑
  const handleForgetPwd = () => {
    Taro.showToast({ title: '联系客服:0757-86834274', icon: 'none' })
  }

  return (
    <View className={styles.login}>
      <Image className="full-100" mode="widthFix" src="https://cdn.zzfzyc.com/service_center/login_head.png"></Image>
      <View className={styles['login-panel']}>
        <View className={styles['login-title']}>
          <Text>您好，</Text>
          <Text>欢迎来到蜘蛛管家</Text>
        </View>
        <View className={styles['input-bar']}>
          <IconFont name="icon-yonghuming" size={48} color="#999999"></IconFont>
          <Divider direction="vertical" customStyles={{ height: '20px', marginLeft: '10px' }}></Divider>
          <Input onInput={handleInputAccount} className={styles['input-bar--account']} placeholder="请输入用户名"></Input>
        </View>
        <View className={styles['input-bar']}>
          <IconFont name="icon-mima" size={48} color="#999999"></IconFont>
          <Divider direction="vertical" customStyles={{ height: '20px', marginLeft: '10px' }}></Divider>
          <Input onInput={handleInputPassword} password={eyesStatus} className={styles['input-bar--password']} type="text" placeholder="请输入密码"></Input>
          <View onClick={handlePwdVisible}>
            {!eyesStatus
              ? (
                <IconFont name="icon-yanjing" size={48} color="#999999"></IconFont>
              )
              : (
                <IconFont name="icon-biyan" size={48} color="#999999"></IconFont>
              )}
          </View>
        </View>
        <View className={styles['login-options']}>
          <View className={styles['login-option']}>
            {/* <MCheckbox status={isRemember} size='small' circle onSelect={selectCallBack} onClose={closeCallBack}>
              记住密码
            </MCheckbox> */}
          </View>
          <View className={styles['login-option']} onClick={handleForgetPwd}>
            <Text className={styles.isForgetPwd}>忘记密码？</Text>
          </View>
        </View>
        <NormalButton circle onClick={handleLogin} customClassName={styles['login-button']} disabled={account === '' || password === ''}>
          登录
        </NormalButton>
        {/* H5 显示微信登陆 */}
        {process.env.TARO_ENV === 'h5' && <QuickLoginWithMemo />}
      </View>
    </View>
  )
}

export default Login
