// components/Modals/ConfirmationModal.jsx
import React, { useState, useEffect } from 'react';
import './ConfirmationModal.css'; // Estilos separados
import { useContext } from 'react';
import { langContext } from '../../context/LenguageContext';


export default function ConfirmationOutcome({ isOpen, onConfirm, onCancel, description, taxes, initialAmount, initialTaxId, isFixedPayment }) {
  /*const [formHousekepeer, setFormHousekepeer] = useState(null)/*/
  const { lang } = useContext(langContext);
  const [form, setForm] = useState({
    tax: '',
    amount: ''
  });

  useEffect(() => {
    if (isOpen) {
      setForm({
        tax: initialTaxId || '',
        amount: initialAmount || ''
      });
    }
  }, [isOpen, initialAmount, initialTaxId]);

  if (!isOpen) return null;
  const handleChange = (e) => {
    const { name, value } = e.target;
    //console.log(name, value);
    setForm((prev) => ({ ...prev, [name]: value }));
  };

  const handleConfirmClick = () => {
    // Envía los valores al padre (Outcomes.jsx)
    onConfirm(form.tax, form.amount);
  };
  return (
    <div className="modal-overlay">
        <form onSubmit={handleConfirmClick}>
        <div className="modal">
            <div className="modal-header">
            <h3>{lang === "en" ? "Confirm the status change" : "Confirmar el cambio de estado"}</h3>
            <button className="close-button" onClick={onCancel}>×</button>
            </div>
            <div className="modal-body">
            <div>
                <p>{lang === "en" ? "Payment" : "Pago"}</p>
                <input name = "PCO" value={description} onChange={handleChange} disabled={true}></input>
            </div>
            <div>
                <p>{lang === "en" ? "Amount" : "Subtotal"}</p>
                <input type='number' required name = "amount" value={form.amount} onChange={handleChange} disabled={isFixedPayment}></input>
            </div>
            <div>
                <p>{lang === "en" ? "Tax" : "Impuesto"}</p>
                <select name = "tax" required value={form.tax} onChange={handleChange} disabled={isFixedPayment}>
                <option value="">{lang === "en" ? "Select a tax" : "Selecciona un impuesto"}</option>
                {taxes?.map(tax => (
                    <option key={tax.id} value={tax.id}>{tax.name}</option>
                ))}
                </select>
            </div>
            <div className="modal-buttons">
                <button className="modal-button yes" type='submit'>{lang === "en" ? "PAID" : "PAGAR"}</button>
            </div>
            </div>
        </div>
        </form>
    </div>
  );
}