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

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

import { Form, Formik } 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 1 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("/my-wallet/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
                      fieldClass="px-6"
                      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
                      fieldClass="px-6"
                      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
                      fieldClass="px-6"
                      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
                      fieldClass="px-6"
                      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
                      fieldClass="px-6"
                      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
                      fieldClass="px-6"
                      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;