import React,{useEffect, useState} from 'react'
import { useNavigate } from 'react-router-dom'
import InputCom from '../Helpers/Inputs/InputCom';
import PaginatedList from '../Pagination/PaginatedList';
import { handlePagingFunc } from '../Pagination/HandlePagination';
import LoadingSpinner from '../Spinners/LoadingSpinner';
import usersService from '../../services/UsersService';

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

const validationSchema = Yup.object().shape({
    name: Yup.string()
        .min(3, "Minimum 3 characters")
        .max(50, "Maximum 50 characters")
        .required("Name is required"),
    cardNum: Yup.string()
        .min(3, "Minimum 3 characters")
        .max(25, "Maximum 25 characters")
        .required("Card Number is required"),
    code: Yup.string()
        .min(3, "Minimum 3 characters")
        .max(25, "Maximum 25 characters")
        .required("Postal Code is required"),
    state: Yup.string()
        .min(3, "Minimum 3 characters")
        .max(25, "Maximum 25 characters")
        .required("State is required"),
    address: Yup.string()
        .min(3, "Minimum 3 characters")
        .max(50, "Maximum 50 characters")
        .required("Address is required"),
    expirationYear: Yup.string()
        .min(4, "Minimum 4 characters")
        .max(4, "Maximum 4 characters")
        .required("Expiration Year is required"),
    expirationMonth: Yup.string()
        .min(1, "Minimum 1 characters")
        .max(2, "Maximum 2 characters")
        .required("Expiration Month is required"),
    cvv: Yup.string()
        .min(3, "Minimum 3 characters")
        .max(4, "Maximum 4 characters")
        .required("CVV Year is required"),
});

const initialValues = {
    name: '',
    cardNum: '',
    code: '',
    state: '',
    address: '',
    expirationYear: '',
    expirationMonth: '',
    cvv: ''
  };


function AddFundDollars(props) {
    const navigate = useNavigate()
    let apiCall = new usersService()

    let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS

    let [prevCardDetails, setPrevCardDetails] = useState(null) // STATE TO HOLD PREVIOUS CARD SELECTED

    let [payListCard, setPayListCard] = useState({loading: true, data:[]}) //USER PREVIOUS CARDS

    const [currentPage, setCurrentPage] = useState(0);
    const indexOfFirstItem = Number(currentPage);
    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
    const currentPreviousCards = payListCard?.data?.slice(indexOfFirstItem, indexOfLastItem);
  
    const handlePagination = (e) => {
      handlePagingFunc(e,setCurrentPage)
    }

    // FUNCTION TO SUBMIT
    const handleSubmit = (values, helpers) => {
        props.setInputError('')
        if(!props.input || props.input == '0'){
            props.setInputError('Please Enter Amount')
            return setTimeout(()=>{props.setInputError('')}, 5000)
        }

        if(isNaN(props.input)){
            props.setInputError('Amount must be a Number')
            return setTimeout(()=>{props.setInputError('')}, 5000)
        }
        if(tab == 'previous'){
            const stateData = {amount: Number(props.input), currency: 'dollars'}
            navigate('confirm-add-fund', {state: stateData}) // State will change later dummy for now
        }
        if(tab == 'new'){
            const stateData = {amount: Number(props.input), currency: 'dollars', ...values}
            navigate('confirm-add-fund', {state: stateData}) // State will change later dummy for now
        }
        props.setInput('')
    }

    useEffect(()=>{
        apiCall.payListCard().then(res => {
            setPayListCard({loading: false, data: res.data.result_list})
        }).catch(err => {
            console.log('PAYCARDLIST ERROR', err)
            setPayListCard({loading: false, data: []})
        })
    }, [])

  return (
    <>
        <h1 className='mb-2 text-xl font-bold text-dark-gray dark:text-white'>Payment Method</h1>
        <div className="w-full">
            {/* switch button */}
            <div className="my-1 flex items-center border-b border-slate-300">
                <button
                name="previous"
                onClick={(e) => setTab(e.target.name)}
                className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
                    tab == "previous" ? "border-sky-blue" : "border-slate-300"
                } tracking-wide transition duration-200`}
                >
                Previous Cards
                </button>
                <button
                name="new"
                onClick={(e) => setTab(e.target.name)}
                className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
                    tab == "new" ? "border-sky-blue" : "border-slate-300"
                }  tracking-wide transition duration-200`}
                >
                Add New Card
                </button>
            </div>
            {/* END OF switch button */}

            {/* previous tab */}
            {tab == 'previous' ?
            <div className="p-4 previous-details w-full border min-h-[300px] flex flex-col justify-between items-center">
            { payListCard.loading ?
                <LoadingSpinner size='10' color='sky-blue' />
                :
                payListCard?.data?.length ?
                <table className="my-3 w-full">
                    <tbody>
                    {currentPreviousCards.map((item, index)=>(
                        <tr key={index} className={index != 0 && 'border-t-2'}>
                            <td>
                                <div className='my-2 flex items-center gap-5'>
                                    <input type="radio" className='w-8 h-8' name='card' value='value' />
                                    <div className='card-details'>
                                        <h1 className='text-lg font-bold text-dark-gray dark:text-white tracking-wide'>{item.description} Card</h1>
                                        <p className='text-base font-bold text-dark-gray dark:text-white tracking-wide'>Bank **************{item.digits}</p>
                                        <div className='w-full sm:flex items-center gap-5'>
                                            <p className='text-base font-bold text-dark-gray dark:text-white tracking-wide'>{item.added}</p>
                                            <p className='text-sm font-bold text-green-700 dark:text-white tracking-wide'>Verified</p>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <button
                                    // onClick={handleSubmit}
                                    type="button"
                                    className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                >
                                    <span className="text-white">Manage</span>
                                </button>
                            </td>
                        </tr>
                    )) 
                    }
                    </tbody>
                </table>
                :
                <div className='w-full flex flex-col items-center'>
                    <p className='my-5 text-base font-bold text-dark-gray dark:text-white tracking-wide'>No Previous Card Found!</p>
                    <button
                        onClick={()=> setTab('new')}
                        type="button"
                        className="my-5 px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                    >
                        <span className="text-white">Add Card</span>
                    </button>
                </div>
                }
                {/* PAGINATION BUTTON */}
                <div className='w-full'>
                    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= payListCard?.data?.length ? true : false} data={payListCard?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
                </div>
                {/* END OF PAGINATION BUTTON */}
            </div>
            :
            <div className="new-details w-full min-h-[300px] border-t">
                <div className="w-full flex flex-col justify-between">
                    <Formik
                        initialValues={initialValues}
                        validationSchema={validationSchema}
                        onSubmit={handleSubmit}
                    >
                        {(props) => {
                        return (
                            <Form>
                            <div className="flex flex-col-reverse sm:flex-row">
                                <div className="flex-1 sm:mr-10">
                                    <div className="fields w-full">
                                        {/* inputs starts here */}
                                        {/* Name */}
                                        <div className="field w-full my-6">
                                        <InputCom
                                            fieldClass="px-6"
                                            spanTag='*'
                                            label="Name on Card"
                                            type="text"
                                            name="name"
                                            placeholder="DUMMY NAME"
                                            value={props.values.name}
                                            inputHandler={props.handleChange}
                                            blurHandler={props.handleBlur}
                                        />
                                        {props.errors.name && props.touched.name && (
                                            <p className="text-sm text-red-500">
                                            {props.errors.name}
                                            </p>
                                        )}
                                        </div>

                                        {/* CARD NUMBER */}
                                        <div className="field w-full mb-6">
                                        <InputCom
                                            fieldClass="px-6"
                                            spanTag='*'
                                            iconName='master-card visa-card atm-card'
                                            label="Card Number"
                                            type="text"
                                            name="cardNum"
                                            placeholder="Enter Card Number"
                                            value={props.values.cardNum}
                                            inputHandler={props.handleChange}
                                            blurHandler={props.handleBlur}
                                        />
                                        {props.errors.cardNum && props.touched.cardNum && (
                                            <p className="text-sm text-red-500">
                                            {props.errors.cardNum}
                                            </p>
                                        )}
                                        </div>
                                        {/* EXPIRE YEAR, YEAR AND CVV */}
                                        <div className="sm:grid gap-5 grid-cols-3 mb-6">
                                            <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                                <div className="select-option">
                                                    <div className={`flex items-center justify-between mb-2.5`}>
                                                        <label
                                                            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
                                                            htmlFor='expiration'
                                                        >Expiration Month <span className="text-red-700 text-sm tracking-wide">*</span></label>
                                                    </div>
                                                    <div
                                                        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
                                                    >
                                                        <select 
                                                        className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
                                                        value={props.values.expirationMonth}
                                                        onChange={props.handleChange}
                                                        onBlur={props.handleBlur}
                                                        name='expirationMonth'
                                                        >
                                                        <option value=''>Select...</option>
                                                        {expireMonth?.length &&
                                                            expireMonth.map((item, index) => (
                                                            <option key={index} value={item.value}>{item.name}</option>
                                                            ))
                                                        }
                                                        </select>
                                                    </div>
                                                </div>
                                                {props.errors.expirationMonth && props.touched.expirationMonth && (
                                                <p className="text-sm text-red-500">
                                                    {props.errors.expirationMonth}
                                                </p>
                                                )}
                                            </div>
                                            <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                                <div className="select-option">
                                                    <div className={`flex items-center justify-between mb-2.5`}>
                                                        <label
                                                            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
                                                            htmlFor='expiration'
                                                        >Expiration Year <span className="text-red-700 text-sm tracking-wide">*</span>
                                                        </label>
                                                    </div>
                                                    <div
                                                        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
                                                    >
                                                        <select 
                                                        className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
                                                        value={props.values.expirationYear}
                                                        onChange={props.handleChange}
                                                        onBlur={props.handleBlur}
                                                        name='expirationYear'
                                                        >
                                                        <option value=''>Select...</option>
                                                        {expireYear?.length &&
                                                            expireYear.map((item, index) => (
                                                            <option key={index} value={item}>{item}</option>
                                                            ))
                                                        }
                                                        </select>
                                                    </div>
                                                </div>
                                                {props.errors.expirationYear && props.touched.expirationYear && (
                                                <p className="text-sm text-red-500">
                                                    {props.errors.expirationYear}
                                                </p>
                                                )}
                                            </div>
                                            <div className="field w-full col-span-1">
                                                <InputCom
                                                fieldClass="px-6"
                                                spanTag='*'
                                                iconName='atm-card'
                                                label="CVV"
                                                type="text"
                                                name="cvv"
                                                placeholder="CVV"
                                                value={props.values.cvv}
                                                inputHandler={props.handleChange}
                                                blurHandler={props.handleBlur}
                                                />
                                                {props.errors.cvv && props.touched.cvv && (
                                                <p className="text-sm text-red-500">
                                                    {props.errors.cvv}
                                                </p>
                                                )}
                                            </div>
                                        </div>
                                        {/* Address */}
                                        <div className="field w-full my-6">
                                        <InputCom
                                            fieldClass="px-6"
                                            spanTag='*'
                                            label="Billing Address"
                                            type="text"
                                            name="address"
                                            placeholder="Billing Address"
                                            value={props.values.Address}
                                            inputHandler={props.handleChange}
                                            blurHandler={props.handleBlur}
                                        />
                                        {props.errors.address && props.touched.address && (
                                            <p className="text-sm text-red-500">
                                            {props.errors.address}
                                            </p>
                                        )}
                                        </div>
                                        {/* postal code and state */}
                                        <div className="sm:grid gap-5 grid-cols-3 mb-6">
                                        <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                            <InputCom
                                            fieldClass="px-6"
                                            spanTag='*'
                                            label="Postal Code"
                                            type="text"
                                            name="code"
                                            placeholder="Postal Code"
                                            value={props.values.code}
                                            inputHandler={props.handleChange}
                                            blurHandler={props.handleBlur}
                                            />
                                            {props.errors.code && props.touched.code && (
                                            <p className="text-sm text-red-500">
                                                {props.errors.code}
                                            </p>
                                            )}
                                        </div>
                                        <div className="field w-full col-span-1">
                                            <InputCom
                                            fieldClass="px-6"
                                            spanTag='*'
                                            label="State"
                                            type="text"
                                            name="state"
                                            placeholder="State"
                                            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>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* <div className="w-full">
                                {requestStatus.message != "" && (
                                <p
                                    className={`text-center text-base ${
                                    requestStatus.status ? "text-green-800" : "text-red-600"
                                    }`}
                                >
                                    {requestStatus.message}
                                </p>
                                )}
                                <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                                <div className="flex items-center space-x-4 mr-9">
                                    <Link
                                    to="/"
                                    className="text-18 text-light-red tracking-wide "
                                    >
                                    <span className="border-b dark:border-[#5356fb29]  border-light-red">
                                        {" "}
                                        Cancel
                                    </span>
                                    </Link>

                                    {requestStatus.loading ? (
                                    <LoadingSpinner size="8" color="sky-blue" />
                                    ) : (
                                    <button
                                        type="submit"
                                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                    >
                                        Update Profile
                                    </button>
                                    )}
                                </div>
                                </div>
                            </div> */}
                             <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
                                <button
                                    type="submit"
                                    className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                >
                                    <span className="text-white">Continue</span>
                                </button>
                            </div>
                            </Form>
                        );
                        }}
                    </Formik>
                </div>
            </div>
            }
        </div>
        { tab == 'previous' &&
        <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
            <button
                onClick={handleSubmit}
                type="button"
                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
            >
                <span className="text-white">Continue</span>
            </button>
        </div>
        }
    </>
  )
}

export default AddFundDollars


// FORMS ARRAY OF EXPIRATION YEAR FOR CARD
const expireYear = []
let currentYear = new Date().getFullYear()
for(let i=0; i<=6; i++){
    expireYear.push(currentYear + i)
}

// FORMS ARRAY OF EXPIRATION MONTH FOR CARD
let month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
const expireMonth = []
for(let i=0; i<month.length; i++){
    expireMonth.push({name:month[i], value:i+1})
}