import React, { useEffect, useState } from 'react'
import { Form, Formik } from "formik";
import * as Yup from "yup";
import { useDispatch } from 'react-redux'

import { Link, useNavigate, useParams } from 'react-router-dom'
import siteLinks from '../../links/siteLinks'
import { useMutation } from '@tanstack/react-query';
import { completePWDReset, verifyResetToken } from '../../services/services';
import { updateUserDetails } from '../../store/UserDetails'

import { IoMdArrowDropdown } from "react-icons/io";
import getImage from '../../utils/getImage';

const validationSchema = Yup.object().shape({
      password: Yup.string().required("Password is required"),
      confirmpassword: Yup.string().required("Confirm Password is required").oneOf([Yup.ref('password')], 'Passwords must match')
  })

  const initialValues = {
    password: '',
    confirmpassword: '',
  };

export default function AccPWDReset() {

    const {token} = useParams()

    const dispatch = useDispatch()

    const navigate = useNavigate()

    const [user, setUser] = useState(null)

// API to verify email link
  const verifyLink = useMutation({
    mutationFn: (fields) => {
        return verifyResetToken(fields)
    },
    onSuccess: (res) => {
        // console.log('res', res.data)
        if(res.data.resultCode != '0' || !res?.data?.pending_uid){
            throw({message: res?.data?.resultDescription})
        }
        // setUser({user:'testaccount', ...res.data})
        setUser(res.data)
    },
    // onError: (err) => {
    //     console.log('err', err)
    // }
  })

  const resetPWD = useMutation({
    mutationFn: (fields) => {
        return completePWDReset(fields)
    },
    onSuccess: (res) => {
        if(res?.data?.resultCode != '0'){
            throw({message: res?.data?.resultDescription})
        }
        // const {token, room, uid} = res?.data
        // if(!token || !room){
        //     throw({message: 'something went wrong, try again!'})
        // }
        // localStorage.setItem('token', token)
        // localStorage.setItem('room', room)
        // localStorage.setItem('uid', uid)
        // dispatch(updateUserDetails({ ...res?.data }));
        // navigate('/dash') // later add redux to dispatch state
    },
    // onError: (err) => {
    //     console.log('err', err)
    // }
  })
  
  const handleCompletePWDReset = (values) => {
    let reqData = {
        reset_token: token,
        reset_uid: user?.pending_uid,
        new_password: values.password,
    }
    resetPWD.mutate(reqData)
  }

  useEffect(()=>{
    if(!token){
        return navigate(siteLinks.login, {replace: true})
    }
    verifyLink.mutate({reset_token: token})
  }, [])

  return (
    <div className="app">
        <div className="app-wrap">
            <div className="app-contant">
                <div className="vh-100 bg-white custom-bg">
                    <div className="container-fluid p-0">
                        <div className="row no-gutters justify-content-center">
                        <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
                            <div className="mt-5 d-flex">
                                <div className="bg-white register p-5">
                                    <h1 className="mb-2">MERMS Panel</h1>
                                    {(verifyLink.isSuccess && !resetPWD.isSuccess) && <p>Complete your password reset</p>}
                                    <div
                                    >
                                        <div className='mt-2'>
                                            <div className="row">
                                                {resetPWD.isSuccess ?
                                                    <>
                                                        <div className='col-12'>
                                                            <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
                                                                <h4 className='p-4 text-black'>Your password reset is completed</h4>
                                                                <img className='' style={{width: '150px'}} src={getImage('reset-password.png')} alt='reset-icon' />
                                                                <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
                                                            </div>
                                                        </div>
                        
                                                        <div className="col-12  mt-3">
                                                            <p>Go <Link to={siteLinks.home}> Back</Link></p>
                                                        </div>
                                                    </>
                                                    :
                                                    <>
                                                        {verifyLink.isPending ?
                                                            <div className='col-12'>
                                                                <div className="rounded-2 d-flex flex-column justify-content-center align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
                                                                    <div className="col-12 d-flex flex-column justify-content-center align-items-center">
                                                                        <p className='text-black'>loading...</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            : verifyLink.isSuccess ?
                                                                <div className='col-12'>
                                                                    <Formik
                                                                        initialValues={initialValues}
                                                                        validationSchema={validationSchema}
                                                                        onSubmit={handleCompletePWDReset}
                                                                    >
                                                                        {(props) => {
                                                                        return (
                                                                            <Form className='mt-2'>
                                                                                <div className="row">
                                                                                    <>
                                                                                        <div className="col-12">
                                                                                            <div className="form-group">
                                                                                                <label className={`text-black fw-bold control-label`}>Username: {user?.user}</label>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div className="col-12">
                                                                                            <div className="form-group">
                                                                                                <label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
                                                                                                <input type="password" name='password' className="form-control" placeholder="password" value={props.values.password} onChange={props.handleChange} />
                                                                                            </div>
                                                                                        </div>
                                                                                        <div className="col-12">
                                                                                            <div className="form-group">
                                                                                                <label className={`text-black fw-bold control-label`}>Confirm Password* <span className={`${(props.errors.confirmpassword && props.touched.confirmpassword) && 'text-danger'}`}>{(props.errors.confirmpassword && props.touched.confirmpassword) && props.errors.confirmpassword}</span></label>
                                                                                                <input type="password" name='confirmpassword' className="form-control" placeholder="confirmpassword" value={props.values.confirmpassword} onChange={props.handleChange} />
                                                                                            </div>
                                                                                        </div>

                                                                                        {resetPWD.error &&
                                                                                            <>
                                                                                            <div className="col-12">
                                                                                                <p className='text-danger'>{resetPWD.error.message}</p>
                                                                                            </div>
                                                                                            </>
                                                                                        }

                                                                                        <div className="col-12 mt-3 text-end">
                                                                                            <button type='submit' className="btn btn-primary text-uppercase">{resetPWD.isPending ? 'loading...' : 'reset password'}</button>
                                                                                        </div>
                                                                                    </>
                                                                                </div>
                                                                            </Form>
                                                                        );
                                                                        }}
                                                                    </Formik>
                                                                </div>
                                                            : verifyLink.error ?
                                                            <>
                                                                <div className='col-12'>
                                                                    <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#E9D0DD'}}>
                                                                        <h4 className='p-4 text-black'>Unable to continue password reset. Please start again</h4>
                                                                        <img className='' style={{width: '150px'}} src={getImage('reset-password.png')} alt='reset-icon' />
                                                                        <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
                                                                    </div>
                                                                </div>
                                
                                                                <div className="col-12  mt-3">
                                                                    <p>Go <Link to={siteLinks.home}> Back</Link></p>
                                                                </div>
                                                            </>
                                                            :
                                                            null
                                                        }
                                                    </>
                                                }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-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>
  )
}