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

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,
    })
    console.log('state===>', res)
    if (res.success) {
      alert.success('登陆成功')
      setToken(res.data.token)
      setUserInfo({ ...res.data })

      Taro.switchTab({
        url: '/pages/index/index',
      })
    } else {
      alert.error('登陆失败')
    }
  }


  return (
    <View className={styles.login}>
      <Image className='full-100' mode='widthFix' src='https://s1.ax1x.com/2022/09/08/vqiVZF.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'></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'></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']}>
            <Text className={styles.isForgetPwd}>忘记密码？</Text>
          </View>
        </View>
        <NormalButton circle plain onClick={handleLogin} customClassName={styles['login-button']}>
          登录
        </NormalButton>
        <QuickLogin />
      </View>
    </View>
  )
}

const QuickLogin: FC = memo(() => {
  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>
  )
})

export default Login