import React, { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import InputCom from "../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import RecentActivityTable from "./WalletComponent/RecentActivityTable";

import AddFundDollars from "./AddFundDollars";

function AddFund({ payment }) {
  const navigate = useNavigate();
  const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND

  //STATE FOR CONTROLLED INPUT
  let [input, setInput] = useState("");

  let [inputError, setInputError] = useState("");

  // FUNCTION TO HANDLE INPUT CHANGE
  const handleChange = ({ target: { name, value } }) => {
    setInput(value);
  };

  //FUNCTION TO HANDLE SUBMIT
  const handleSubmit = () => {
    setInputError("");
    if (!input || input == "0") {
      setInputError("Please Enter Amount");
      return setTimeout(() => {
        setInputError("");
      }, 5000);
    }

    if (isNaN(input)) {
      setInputError("Amount must be a Number");
      return setTimeout(() => {
        setInputError("");
      }, 5000);
    }

    const stateData = { amount: Number(input), currency: "naira" };
    navigate("confirm-add-fund", { state: stateData });

    setInput("");
  };
  
  return (
    <div>
      {/* heading */}
      {/* <div className="sm:flex justify-between items-center mb-6">
                <div className="w-full flex justify-start space-x-3 items-center">
                    <button
                    type="button"
                    className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
                    onClick={() =>
                        navigate('/my-wallet', { replace: true })
                    }
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="35"
                            height="35"
                            viewBox="0 0 24 24"
                            fill="skyblue"
                        >
                            <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
                        </svg>
                    </button>
                    <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
                    Add Credit
                    </h1>
                </div>
                <div className="slider-btns flex space-x-4">
                    <div
                        onClick={() => filterHandler("today")}
                        className="relative"
                    ></div>
                </div>
            </div> */}

      <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
        <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
            {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
            {/*<hr />*/}
            <form className="md:p-8 p-4 add-fund-info">
              <div className="field w-full mb-6">
                <InputCom
                  fieldClass="px-6"
                  label={
                    currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
                  }
                  type="text"
                  name="amount"
                  placeholder="0"
                  value={input}
                  inputHandler={handleChange}
                />
                {inputError && (
                  <p className="text-base text-red-500">{inputError}</p>
                )}
              </div>
            </form>
            <hr />

            {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
            {currency == "US Dollars" && (
              <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
                <AddFundDollars
                  setInputError={setInputError}
                  input={input}
                  setInput={setInput}
                />
              </div>
            )}

            {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
            {currency != "US Dollars" && (
              <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>
            )}
          </div>
        </div>
      </div>

      {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
      {currency != "US Dollars" && (
        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
          <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
            <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
              <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
                Recent Activity
              </h2>
              {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
              {payment.loading ? (
                <LoadingSpinner size="16" color="sky-blue" />
              ) : (
                <RecentActivityTable payment={payment} />
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default AddFund;