n3wt-school/Front-End/src/components/Inscription/PaymentMethodSelector.js

import React, { useEffect } from 'react';
import SelectChoice from '@/components/SelectChoice';
import RadioList from '@/components/RadioList';

export default function PaymentMethodSelector({
  formData,
  setFormData,
  registrationPaymentModes,
  tuitionPaymentModes,
  registrationPaymentPlans,
  tuitionPaymentPlans,
  errors,
  setIsPageValid,
}) {
  useEffect(() => {
    const isValid = !Object.keys(formData).some(
      (field) => getLocalError(field) !== ''
    );
    setIsPageValid(isValid);
    console.log('formdata : ', formData);
  }, [formData, setIsPageValid]);

  const paymentModesOptions = [
    { id: 1, name: 'Prélèvement SEPA' },
    { id: 2, name: 'Virement' },
    { id: 3, name: 'Chèque' },
    { id: 4, name: 'Espèce' },
  ];

  const paymentPlansOptions = [
    { id: 1, name: '1 fois' },
    { id: 3, name: '3 fois' },
    { id: 10, name: '10 fois' },
    { id: 12, name: '12 fois' },
  ];

  const getError = (field) => {
    return errors?.student?.[field]?.[0];
  };

  const getLocalError = (field) => {
    if (
      (field === 'registration_payment' &&
        (!formData.registration_payment ||
          String(formData.registration_payment).trim() === '')) ||
      (field === 'tuition_payment' &&
        (!formData.tuition_payment ||
          String(formData.tuition_payment).trim() === '')) ||
      (field === 'registration_payment_plan' &&
        (!formData.registration_payment_plan ||
          String(formData.registration_payment_plan).trim() === '')) ||
      (field === 'tuition_payment_plan' &&
        (!formData.tuition_payment_plan ||
          String(formData.tuition_payment_plan).trim() === ''))
    ) {
      return 'Champs requis';
    }
    return '';
  };

  const onChange = (field, value) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  return (
    <>
      {/* Frais d'inscription */}
      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
        <h2 className="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">
          Frais d'inscription
        </h2>

        <div className="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-100">
          <p className="text-gray-700 text-sm mb-2">
            <strong className="text-gray-900">Montant :</strong>{' '}
            {formData.totalRegistrationFees} €
          </p>
        </div>

        <SelectChoice
          name="registration_payment"
          label="Mode de Paiement"
          placeHolder="Sélectionner un mode de paiement"
          selected={formData.registration_payment}
          callback={(e) => onChange('registration_payment', e.target.value)}
          choices={registrationPaymentModes.map((mode) => ({
            value: mode.mode,
            label:
              paymentModesOptions.find((option) => option.id === mode.mode)
                ?.name || 'Mode inconnu',
          }))}
          required
          errorMsg={
            getError('registration_payment') ||
            getLocalError('registration_payment')
          }
        />

        <RadioList
          sectionLabel="Choisissez une option"
          required
          items={paymentPlansOptions
            .filter((option) =>
              registrationPaymentPlans.some(
                (plan) => plan.frequency === option.id
              )
            )
            .map((option) => ({
              id: option.id,
              label: option.name,
            }))}
          formData={{
            ...formData,
            registration_payment_plan: parseInt(
              formData.registration_payment_plan,
              10
            ), // S'assurer que la valeur est un entier
          }}
          handleChange={(e) => {
            const value = parseInt(e.target.value, 10);
            onChange('registration_payment_plan', value); // Convertir la valeur en entier
          }}
          fieldName="registration_payment_plan"
          className="mt-4"
        />
      </div>

      {/* Frais de scolarité */}
      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mt-12">
        <h2 className="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">
          Frais de scolarité
        </h2>

        <div className="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-100">
          <p className="text-gray-700 text-sm mb-2">
            <strong className="text-gray-900">Montant :</strong>{' '}
            {formData.totalTuitionFees} €
          </p>
        </div>

        <SelectChoice
          name="tuition_payment"
          label="Mode de Paiement"
          placeHolder="Sélectionner un mode de paiement"
          selected={formData.tuition_payment}
          callback={(e) => onChange('tuition_payment', e.target.value)}
          choices={tuitionPaymentModes.map((mode) => ({
            value: mode.mode,
            label:
              paymentModesOptions.find((option) => option.id === mode.mode)
                ?.name || 'Mode inconnu',
          }))}
          required
          errorMsg={
            getError('tuition_payment') || getLocalError('tuition_payment')
          }
        />

        <RadioList
          sectionLabel="Choisissez une option"
          items={paymentPlansOptions
            .filter((option) =>
              tuitionPaymentPlans.some((plan) => plan.frequency === option.id)
            )
            .map((option) => ({
              id: option.id,
              label: option.name,
            }))}
          formData={formData}
          handleChange={(e) => onChange('tuition_payment_plan', e.target.value)}
          fieldName="tuition_payment_plan"
          className="mt-4"
          errorMsg={
            getError('tuition_payment_plan') ||
            getLocalError('tuition_payment_plan')
          }
        />
      </div>
    </>
  );
}