Edit Referral

/* eslint-disable no-prototype-builtins */
import { useEffect } from 'react'
import { useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { Field, Formik, Form, ErrorMessage } from 'formik'
import _, { uniqueId } from 'lodash'
import DashboardCard from '../../../components/dashboard/Card'
import CustomCard from '../../../components/dashboard/CustomCard'
import DashboardLayout from '../../../components/layout/Dashboard'
import { PrivateAPI } from '../../../helpers/Connector'

import DashboardLoadingSpinner from '../../../components/dashboard/Loader'
import EditRatesForm from './components/EditRatesForm'

export default function AdminEditVendorReferrals() {
  const { id } = useParams()
  const [validation, setValidation] = useState([])

  const [loading, setLoading] = useState(false)

  const [data, setData] = useState({
    vendor: {},
    ref_rate: []
  })
  const [packages, setPackages] = useState([])

  const initialValues = {
    vendor:
      data?.vendor?.vendor?.name_institution +
      ' - ' +
      data?.vendor?.vendor?.pic_name,
    referral_code: data.vendor.referral_code,
    ref_rate: _.mapValues(_.groupBy(data?.ref_rate, 'id_package'), (group) => {
      return _.map(group, (item) => {
        return _.omit(item, 'id_package')
      })
    })
  }

  const SubmitHandler = (values) => {
    console.log({ values })
  }

  const getVendorDetail = async () => {
    try {
      const response = await PrivateAPI.get(`/admin/vendor/referral/${id}`)

      return response
    } catch (error) {
      return error
    }
  }

  const getPackages = async () => {
    try {
      const response = await PrivateAPI.get(
        `/admin/package?q=&type=MEMBERSHIP&page=&per_page=`
      )

      return response
    } catch (error) {
      return error
    }
  }

  const addRates = (rate) => {
    let rates = [rate]
    let _rates = [...rates]
    _rates.push({
      rate_indicator: '',
      discount_rate: '',
      comission_rate: ''
    })
  }

  useEffect(() => {
    let subscribe = true

    const fetchData = async () => {
      try {
        setLoading(true)

        const vendor = await getVendorDetail()
        const pkgs = await getPackages()

        let arr = []

        vendor.data.ref_rate.map((v) => {
          arr.push({
            id_package: v.pivot.id_package,
            rate_indicator: v.pivot.rate_indicator,
            discount_rate: v.pivot.discount_rate,
            comission_rate: v.pivot.comission_rate
          })
        })

        if (subscribe) {
          setData({
            vendor: vendor.data,
            ref_rate: arr
          })

          setPackages(pkgs.data.data)
        }
      } catch (error) {
        return error
      } finally {
        setLoading(false)
      }
    }

    fetchData()

    return () => {
      subscribe = false
    }
  }, [])

  return (
    <>
      <DashboardLayout title="Update Referrals">
        <section className="row">
          <div className="col-md-12">
            {loading ? (
              <DashboardLoadingSpinner />
            ) : (
              <DashboardCard>
                {validation.message && (
                  <div className="alert alert-danger">{validation.message}</div>
                )}
                <Formik
                  initialValues={initialValues}
                  enableReinitialize
                  onSubmit={SubmitHandler}
                >
                  {({ values }) => (
                    <Form className="form">
                      <div className="form-body">
                        <fieldset className="fieldset">
                          <legend className="legend">Vendor Details:</legend>
                          <div className="row">
                            <div className="col-md-2">
                              <label>Vendor</label>
                            </div>
                            <div className="col-md-10 form-group">
                              <Field
                                className="form-control"
                                name="vendor"
                                readOnly
                                disabled
                              />
                            </div>

                            <div className="col-md-2">
                              <label>Referral Code</label>
                            </div>
                            <div className="col-md-10 form-group">
                              <Field
                                className="form-control"
                                name="referral_code"
                                readOnly
                                disabled
                              />
                            </div>
                          </div>
                        </fieldset>

                        <fieldset className="fieldset">
                          <legend className="legend">Package Rates</legend>
                          <div className="package-container">
                            {packages.map((pkg, index) => (
                              <CustomCard key={pkg.id} title={pkg.package_name}>
                                {values.ref_rate.hasOwnProperty(pkg.id)
                                  ? values.ref_rate[pkg.id].map((r, idx) => (
                                      <EditRatesForm
                                        key={uniqueId(`ref-rate-${index}-`)}
                                      >
                                        <div className="row">
                                          <div className="col-md-12">
                                            <button
                                              type="button"
                                              className="btn btn-primary"
                                              onClick={() => addRates(r)}
                                            >
                                              Add
                                            </button>
                                          </div>
                                          <div className="col-md-12 form-group">
                                            <label>Rate Indicator</label>
                                            <Field
                                              className="form-control"
                                              name={`ref_rate[${pkg.id}][${idx}].rate_indicator`}
                                              disabled
                                              readOnly
                                            />
                                          </div>

                                          <div className="col-md-12 form-group">
                                            <label>Discount Rate</label>
                                            <Field
                                              className="form-control"
                                              name={`ref_rate[${pkg.id}][${idx}].discount_rate`}
                                            />
                                          </div>

                                          <div className="col-md-12 form-group">
                                            <label>Commission Rate</label>
                                            <Field
                                              className="form-control"
                                              name={`ref_rate[${pkg.id}][${idx}].comission_rate`}
                                            />
                                          </div>

                                          <div className="col-md-12 form-group">
                                            <hr
                                              style={{ border: 'solid 1px' }}
                                            />
                                          </div>
                                        </div>
                                      </EditRatesForm>
                                    ))
                                  : 'not match'}
                              </CustomCard>
                            ))}
                          </div>
                        </fieldset>

                        <div className="col-sm-12 d-flex justify-content-end mt-3">
                          <button
                            type="submit"
                            className="btn btn-primary me-1 mb-1"
                          >
                            Submit
                          </button>
                        </div>
                      </div>
                    </Form>
                  )}
                </Formik>
              </DashboardCard>
            )}
          </div>
        </section>
      </DashboardLayout>
    </>
  )
}