import React, {useEffect, useState} from 'react'
import { Link, useNavigate } from 'react-router-dom'
import Icons from '../Helpers/Icons'
import usersService from '../../services/UsersService'
import InputCom from '../Helpers/Inputs/InputCom'

import LoadingSpinner from '../Spinners/LoadingSpinner'
import {toast} from 'react-toastify'

import {Formik, Form} from 'formik'
import * as Yup from 'yup'


const validationSchema = Yup.object().shape({
    firstname: Yup.string()
      .min(3, 'Minimum 3 characters')
      .max(25, 'Maximum 25 characters')
      .required('Firstname is required'),
    lastname: Yup.string()
      .min(3, 'Minimum 3 characters')
      .max(25, 'Maximum 25 characters')
      .required('Lastname is required'),
    country: Yup.string()
      .min(1, 'Minimum 3 characters')
      .max(25, 'Maximum 25 characters')
      .required('Country is required'),
    bank: Yup.string()
      .min(3, 'Minimum 3 characters')
      .max(25, 'Maximum 25 characters')
      .required('Bank name is required'),
    accountNumber: Yup.string()
    .matches(/\d/, "must be a number")
    .min(3, 'Minimum 3 characters')
    .max(25, 'Maximum 25 characters')
    .required('Account Number is required'),
    repeatAccountNumber: Yup.string()
    .required('Repeat Account Number is required')
    .oneOf([Yup.ref('accountNumber'), null], 'Must match Account Number'),
    accountType: Yup.string()
      .min(1, 'Minimum 3 characters')
      .max(25, 'Maximum 25 characters')
      .required('Account Type is required'),
    city: Yup.string()
      .min(3, 'Minimum 3 characters')
      .max(25, 'Maximum 25 characters')
      .required('City is required'),
    state: Yup.string()
      .min(3, 'Minimum 3 characters')
      .max(25, 'Maximum 25 characters')
      .required('State is required'),
  })
  
  const initialValues = {
    firstname: '',
    lastname: '',
    country: '',
    bank: '',
    accountNumber: '',
    repeatAccountNumber: '',
    accountType: '',
    state: '',
    city: ''
  }

function AddRecipient() {

    const apiURL = new usersService()

    const navigate = useNavigate()

    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})

    let [allCountries, setAllCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
        loading: true,
        data: []
    })

    let [bankName, setBankName] = useState({ // STATE TO HOLD LIST OF BANK NAME
        loading: true,
        data: []
    })

    let [accType, setAccType] = useState({ // STATE TO HOLD LIST ACCOUNT TYPE
        loading: true,
        data: []
    })

    //FUNCTION TO HANDLE ADD RECIPIENT SUBMIT
    const handleSubmit = (values, helpers) => {
        setRequestStatus({message: '', loading: true, status: false})

        let reqData = { //REQUEST DATA FOR API CALL
            firstname: values.firstname,
            lastname: values.lastname,
            bank_code: values.bank,
            account_no: values.accountNumber,
            account_type: values.accountType,
            country: values.country,
            state: values.state,
            city: values.city
        }

        //CALL TO ADD RECIPIENT API
        apiURL.addRecipient(reqData).then((res)=>{
            if(res.data.internal_return < 0){
                setRequestStatus({message: 'could not add recipient, try again!', loading: false, status: true})
                return
            }
            // setRequestStatus({message: 'Recipient Added Successfully!', loading: false, status: true})
            toast.success("Recipient Added Successfully!");
            setTimeout(()=>{navigate('../transfer-fund',{replace:true})},1000)
        }).catch((error)=>{
            setRequestStatus({message: 'Opps! an error occured! Try again later', loading: false, status: false})
        })    
    }


    // FUNCTION TO GET COUNTRIES
    const getCountry = ()=> { 
        apiURL.getSignupCountryData().then((res)=>{
            if(res.data.internal_return < 0){
                setAllCountries(prev => ({loading: false, data: []}))
                return
            }
            setAllCountries(prev => ({loading: false, data:res.data.signup_country}))
        }).catch((error)=>{
            setAllCountries(prev => ({loading: false, data: []}))
        })
    }
    // END OF FUNCTION TO GET COUNTRIES

    // FUNCTION TO GET COUNTRY BANK
    const getCountryBank = ()=> { 
        apiURL.getCountryBank().then((res)=>{
            if(res.data.internal_return < 0){
                setBankName(prev => ({loading: false, data: []}))
                return
            }
            setBankName(prev => ({loading: false, data:res.data.result_list}))
        }).catch((error)=>{
            setBankName(prev => ({loading: false, data: []}))
        })
    }
    // END OF FUNCTION TO GET COUNTRY BANK

    // FUNCTION TO GET ACCOUNT TYPES
    const getAccountTypes = ()=> { 
        apiURL.getAccountTypes().then((res)=>{
            if(res.data.internal_return < 0){
                setAccType(prev => ({loading: false, data: []}))
                return
            }
            setAccType(prev => ({loading: false, data:res.data.result_list}))
        }).catch((error)=>{
            setAccType(prev => ({loading: false, data: []}))
        })
    }
    // END OF FUNCTION TO GET ACCOUNT TYPES

    useEffect(()=>{
        getCountry() // TO LOAD LIST COUNTRY
        getCountryBank() // TO LOAD LIST COUNTRY BANK
        getAccountTypes() // TO LOAD LIST ACCOUNT TYPES
    },[])

    return (
        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
            <div className="w-full mb-10 lg:mb-0">
                <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
                    <h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-semibold'>ADD BANK ACCOUNT</h2>
                    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
                        {(props)=>(
                        <Form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]'>
                                
                                {/* inputs starts here */}
                                {/* firstname */}
                                <div className="xl:flex xl:space-x-7 mb-6">
                                    <div className="field w-full mb-6 xl:mb-0">
                                    <InputCom
                                        label="Firstname"
                                        type="text"
                                        name="firstname"
                                        placeholder="Account Firstname"
                                        value={props.values.firstname}
                                        inputHandler={props.handleChange}
                                        blurHandler={props.handleBlur}
                                    />
                                    {(props.errors.firstname && props.touched.firstname) && <p className="text-sm text-red-500">{props.errors.firstname}</p>}
                                    </div>

                                    {/* lastname */}
                                    <div className="field w-full">
                                    <InputCom
                                        label="Lastname"
                                        type="text"
                                        name="lastname"
                                        placeholder="Account Lastname"
                                        value={props.values.lastname}
                                        inputHandler={props.handleChange}
                                        blurHandler={props.handleBlur}
                                    />
                                    {(props.errors.lastname && props.touched.lastname) && <p className="text-sm text-red-500">{props.errors.lastname}</p>}
                                    </div>
                                </div>

                                
                                <div className="xl:flex xl:space-x-7 mb-6">
                                    {/* country */}
                                    <div className='add-recipient w-full mb-6 xl:mb-0'>
                                        <label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Country <span className='text-red-500'>*</span></label>
                                        <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='country' 
                                        value={props.values.country}
                                        onChange={props.handleChange}
                                        onBlur={props.handleBlur}
                                        >
                                            {allCountries.loading ?
                                            <option className='text-slate-500 text-lg' value="">Loading...</option>
                                            :
                                            allCountries.data.length ?
                                            <>
                                                <option className='text-slate-500 text-lg' value="">Select...</option>
                                                {allCountries.data.map((item, index)=>(
                                                    <option key={index} className='text-slate-500 text-lg' value={item[0]}>{item[1]}</option>
                                                ))}
                                            </>
                                            :
                                            <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
                                            }
                                        </select>
                                        {(props.errors.country && props.touched.country) && <p className="text-sm text-red-500">{props.errors.country}</p>}
                                    </div>
                                    
                                    {/* bank name */}
                                    <div className='add-recipient w-full'>
                                        <label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Bank Name <span className='text-red-500'>*</span></label>
                                        <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='bank' 
                                        value={props.values.bank}
                                        onChange={props.handleChange}
                                        onBlur={props.handleBlur}
                                        >
                                        {bankName.loading ?
                                            <option className='text-slate-500 text-lg' value="">Loading...</option>
                                            :
                                            bankName.data.length ?
                                            <>
                                                <option className='text-slate-500 text-lg' value="">Select...</option>
                                                {bankName.data.map((item, index)=>(
                                                    <option key={index} className='text-slate-500 text-lg' value={item.code}>{item.name}</option>
                                                ))}
                                            </>
                                            :
                                            <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
                                            }
                                        </select>
                                        {(props.errors.bank && props.touched.bank) && <p className="text-sm text-red-500">{props.errors.bank}</p>}
                                    </div>
                                </div>

                                {/* ACCOUNT NUMBER */}
                                <div className="xl:flex xl:space-x-7 mb-6">
                                    <div className="field w-full mb-6 xl:mb-0">
                                    <InputCom
                                        label="Account Number"
                                        type="text"
                                        name="accountNumber"
                                        placeholder="Account No"
                                        value={props.values.accountNumber}
                                        inputHandler={props.handleChange}
                                        blurHandler={props.handleBlur}
                                    />
                                    {(props.errors.accountNumber && props.touched.accountNumber) && <p className="text-sm text-red-500">{props.errors.accountNumber}</p>}
                                    </div>

                                    {/* REPEAT ACCT. NUMBER */}
                                    <div className="field w-full">
                                    <InputCom
                                        label="Repeat Account Number"
                                        type="text"
                                        name="repeatAccountNumber"
                                        placeholder="Repeat Account Number"
                                        value={props.values.repeatAccountNumber}
                                        inputHandler={props.handleChange}
                                        blurHandler={props.handleBlur}
                                    />
                                    {(props.errors.repeatAccountNumber && props.touched.repeatAccountNumber) && <p className="text-sm text-red-500">{props.errors.repeatAccountNumber}</p>}
                                    </div>
                                </div>

                                <div className="xl:flex xl:space-x-7 mb-6">
                                    {/* Account Type */}
                                    <div className='add-recipient w-full'>
                                        <label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Account Type <span className='text-red-500'>*</span></label>
                                        <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='accountType' 
                                        value={props.values.accountType}
                                        onChange={props.handleChange}
                                        onBlur={props.handleBlur}
                                        >
                                            {accType.loading ?
                                            <option className='text-slate-500 text-lg' value="">Loading...</option>
                                            :
                                            accType.data.length ?
                                            <>
                                                <option className='text-slate-500 text-lg' value="">Select...</option>
                                                {accType.data.map((item, index)=>(
                                                    <option key={index} className='text-slate-500 text-lg' value={item.value}>{item.name}</option>
                                                ))}
                                            </>
                                            :
                                            <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
                                            }
                                        </select>
                                        {(props.errors.accountType && props.touched.accountType) && <p className="text-sm text-red-500">{props.errors.accountType}</p>}
                                    </div>
                                </div>

                                {/* state */}
                                <div className="xl:flex xl:space-x-7 mb-6">
                                    <div className="field w-full mb-6 xl:mb-0">
                                    <InputCom
                                        label="State"
                                        type="text"
                                        name="state"
                                        placeholder="State/Province"
                                        value={props.values.state}
                                        inputHandler={props.handleChange}
                                        blurHandler={props.handleBlur}
                                    />
                                    {(props.errors.state && props.touched.state) && <p className="text-sm text-red-500">{props.errors.state}</p>}
                                    </div>

                                    {/* city */}
                                    <div className="field w-full">
                                    <InputCom
                                        label="City"
                                        type="text"
                                        name="city"
                                        placeholder="City"
                                        value={props.values.city}
                                        inputHandler={props.handleChange}
                                        blurHandler={props.handleBlur}
                                    />
                                    {(props.errors.city && props.touched.city) && <p className="text-sm text-red-500">{props.errors.city}</p>}
                                    </div>
                                </div>
                                {/* end of inputs starts here */}

                                {/* REQUEST ERROR DISPLAY */}
                                {requestStatus.message && <p className='text-sm text-red-500'>{requestStatus.message}</p>}

                                <div className='add-recipient-btn flex justify-end items-center py-4'>
                                    {requestStatus.loading ? 
                                    <LoadingSpinner size={6} color='sky-blue' />
                                    :
                                    <button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1'>
                                        <span className='pr-2'>ADD RECIPIENT</span>
                                        <Icons name="arrows" />
                                    </button>
                                    }
                                </div>
                        </Form>
                        )}
                   </Formik>
                </div>
            </div>

        </div>
      )
}

export default AddRecipient