import React, { useRef } from "react"
import cn from "classnames"
import style from "./index.module.scss"
import { useLocation, Route, Switch } from "react-router-dom"
import { useState } from "react"
import Bubbles from "@/components/Loading/Bubbles"
import { Trans, Translation, useTranslation } from "react-i18next"

export default function Login(props: any) {
  const [isSuccess, setIsSuccess] = useState(false)
  const [usename, setUsername] = useState("23")
  const [password, setPassword] = useState("")
  const { t ,i18n} = useTranslation()

  function clickLogin(event: any) {
    event.preventDefault()

    setIsSuccess(true)
    setTimeout(() => {
      setUsername('')
      setPassword('')
      setIsSuccess(false)
    }, 2000)
  }

  return (
    <div className={cn(style.login, style.page)}>

      <div style={{background:"red"}}>
        <button onClick={()=>i18n.changeLanguage(i18n.language=='en'?'zh':'en')}>{i18n.language=='en'?'zh':'en'}</button>
        <h1>{t('home')}阿松大</h1>
        <h1>{usename}</h1>
        <h1>{password}</h1>
        <h2><Trans>home</Trans></h2>
        <Translation>{t => <h3>{t('home')}</h3>}</Translation>
      </div>

      <div className={cn(style.wrapper, isSuccess ? style["form-success"] : "")}>
        <div className={cn(style.container)}>
          <h1><Trans>login.title</Trans></h1>
          <form className={cn(style.form)}>
            <input type="text" value={usename} onChange={(e)=>setUsername(e.target.value)} placeholder={t('login.username_placeholder')} />
            <input type="password" value={password} onChange={(e)=>setPassword(e.target.value)} placeholder={t('login.password_placeholder')} autoComplete="" />
            <button type="submit" id={cn(style["login-login"])} onClick={clickLogin}>
              <Trans>login.btnText</Trans>
            </button>
          </form>
        </div>
        <Bubbles></Bubbles>
      </div>
    </div>
  )
}