import React, { useEffect, useState } from 'react'
import {useLocation, useNavigate} from 'react-router-dom'
import { Content } from '../../../../_digifi/layout/components/content'
import { ToolbarWrapper } from '../../../../_digifi/layout/components/toolbar'
import { CustomLoading, UsersListLoading } from '../user-started/components/loading/UsersListLoading'
import { getVerifiedLoanDetailsByUID } from '../core/_requests'

export default function ApproveRejectPage() {
    const {state:{selectedUser}} = useLocation()
    const navigate = useNavigate()

    const [requestStatus, setRequestStatus] = useState<any>({loading:false, status:false, data:null})

    const [loanDetails, setLoanDetails] = useState<any>({loading:true, data:null})

    const handleSubmit = ():any => {
        setRequestStatus({loading:true, status:false, data:null})
        setTimeout(()=>{
            setRequestStatus({loading:false, status:false, data:null})
        },2000)
    }

    useEffect(()=>{
        if(!selectedUser){
            return navigate('/', {replace:true})
        }
        getVerifiedLoanDetailsByUID(selectedUser?.uid).then(res => {
            setLoanDetails({loading:false, data:res?.data})
        }).catch(err => {
            console.log(err)
            setLoanDetails({loading:false, data:null})
        })
    },[])

  return (
    <>
        {/* <ToolbarWrapper />  */}
        <Content>
            {loanDetails.loading ?
            <div className='position-relative w-100 vh-100'>
                <CustomLoading />
            </div>
            :
            <>
                <div className='w-100'>
                    <h3 className='py-3 py-xl-5 card-title text-gray-800 fw-bold'>Processing: {selectedUser?.uid}</h3>
                </div>
                {/* begin::Row */}
                <div className="row g-5 g-xl-10 mb-5 mb-xl-10">
                {/* begin::Col */}
                <div className="col-xl-6 mb-md-5 mb-xl-10">
                    <div className="card card-flash flex flex-col justify-content-between p-4 h-md-50 mb-5 mb-xl-10 bg-secondary">
                        <h3 className='card-title text-gray-800 fw-bold'>Process Loan</h3>
                        <div className='w-100 d-flex justify-content-between'>
                            <button 
                                className='btn btn-light btn-active-light-secondary text-success btn-lg'
                                onClick={()=>navigate('/loan/pages/process/verified', {replace:true})}
                            >
                                Return
                            </button>
                            <button 
                                className='btn btn-light btn-active-light-secondary text-danger btn-lg'
                                onClick={handleSubmit}
                            >
                                Reject
                            </button>
                            <button 
                                className='btn btn-light btn-active-light-secondary text-primary btn-lg'
                                onClick={handleSubmit}
                            >
                                Approve
                            </button>
                        </div>
                    </div>
                    <div className="card card-flash flex flex-col p-4 h-md-50 mb-5 mb-xl-10 bg-secondary overflow-scroll">
                        <h3 className='card-title text-gray-800 fw-bold mb-5'>Verification details</h3>
                        <div className='w-100'>
                            {loanDetails?.data?.verification.length > 0 ?
                            <table className='w-100'>
                                {loanDetails?.data?.verification?.map((item:any) => (
                                    <tbody key={item.uid || item.id}>
                                        {Object.keys(item).map(key => (
                                            <tr>
                                                <th className='text-uppercase py-3'>{key}</th>
                                                <td>{item[key]}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                ))}
                            </table>
                            :
                            null
                        }
                        </div>
                    </div>
                </div>
                {/* end::Col */}

                {/* begin::Col */}
                <div className="col-xl-6">
                    <div className="card card-flash flex flex-col p-4 h-md-100 bg-secondary">
                        <h3 className='card-title text-gray-800 fw-bold mb-5'>Loan Details</h3>
                        <div className='w-100'>
                            {loanDetails?.data?.application.length > 0 ?
                            <table className='w-100'>
                                {loanDetails?.data?.application?.map((item:any) => (
                                    <tbody key={item.uid || item.id}>
                                        {Object.keys(item).map(key => (
                                            <tr>
                                                <th className='text-uppercase py-3'>{key}</th>
                                                <td className='flex text-break'>{item[key]}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                ))}
                            </table>
                            :
                            null
                        }
                        </div>
                    </div>
                </div>
                {/* end::Col */}
                </div>
                {/* end::Row */}
            </>
            }
        </Content>
        {requestStatus.loading && <UsersListLoading />}
    </>
  )
}