import React, { useEffect, useState } from 'react'
import LoginImg from '../../assets/bg/login.svg'

import { Link, useNavigate } from 'react-router-dom'
import siteLinks from '../../links/siteLinks'
import { useMutation } from '@tanstack/react-query'

export default function Forgetpwd2() {

  const navigate = useNavigate()

  const [email, setEmail] = useState('')

  const handleChange = ({target:{value}}) => {
    setEmail(value)
  }

  const forgetPwd = useMutation({
    mutationFn: (email) => {
        // if(!email.username || !email.password){
        //     throw new Error('Please provide all email marked *')
        // }
        // return loginUser('panel/auth/login', {email})
        throw new Error('Unable to complete, try again later!')
    },
    onError: (error) => {
        console.log(error)
    },
      onSuccess: (res) => {
        // const {token} = res?.data?.data
        // if(token){
        //     navigate('/dash') // later add redux to dispatch state
        // }
    }
  })

  return (
    <div className="app">
        <div className="app-wrap">
            <div className="app-contant">
                <div className="bg-white">
                    <div className="container-fluid p-0">
                        <div className="row no-gutters">
                            <div className="col-sm-6 col-lg-5 col-xxl-3  align-self-center order-2 order-sm-1">
                                <div className="d-flex align-items-center h-100-vh">
                                    <div className="login p-50">
                                        <h1 className="mb-2">Recover Password</h1>
                                        <p>Please enter your email.</p>
                                        <form className="mt-3 mt-sm-5">
                                            <div className="row">
                                                <div className="col-12">
                                                    <div className="form-group">
                                                        <label className="control-label">Email*</label>
                                                        <input name='email' type="text" onChange={handleChange} value={email} className="form-control" placeholder="Email" />
                                                    </div>
                                                </div>
                                                {forgetPwd.error &&
                                                <>
                                                 <div className="col-12  mt-3">
                                                    <p className='text-danger'>{forgetPwd.error.message}</p>
                                                </div>
                                                </>
                                                }
                                                <div className="col-12 mt-3 text-end">
                                                    <button type='button' onClick={()=>{forgetPwd.mutate(email)}} className="btn btn-primary text-uppercase">Send</button>
                                                </div>
                                                <div className="col-12  mt-3">
                                                    <p>Go <Link to={siteLinks.home}> Back</Link></p>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div className="col-sm-6 col-xxl-9 col-lg-7 bg-gradient o-hidden order-1 order-sm-2">
                                <div className="row align-items-center h-100">
                                    <div className="col-7 mx-auto ">
                                        <img className="img-fluid" src={LoginImg} alt="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
  )
}