import React, { useEffect, useState } from 'react';
import { Alert, Form, Row, Col } from 'react-bootstrap';
import { Contacto } from '../../../../interfaces';
import BaseEditModal from '../Components/BaseEditModal';

interface EditarContactoModalProps {
    show: boolean;
    onHide: () => void;
    contacto: Contacto;
    onUpdated: (updatedContacto: Contacto) => void | Promise<void>;
}

const EditarContactoModal: React.FC<EditarContactoModalProps> = ({ show, onHide, contacto, onUpdated }) => {
    const [form, setForm] = useState<Contacto>(contacto);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        setForm(contacto);
    }, [contacto]);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const normalizedValue = ['TelFijConCli', 'TelCelConCli'].includes(e.target.name)
            ? String(e.target.value || '').replace(/\D/g, '').slice(0, 9)
            : e.target.value;
        setForm({ ...form, [e.target.name]: normalizedValue });
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        setError(null);
        try {
            await onUpdated(form);
            onHide();
        } catch (err: any) {
            console.log(err);
            setError(err?.message || 'Error al actualizar el contacto');
        } finally {
            setLoading(false);
        }
    };

    return (
        <BaseEditModal show={show} onHide={onHide} title="Editar datos de contacto" loading={loading} onSubmit={handleSubmit}>
            {error && <Alert variant="danger">{error}</Alert>}
            <Row className="g-3">
                <Col md={12}>
                    <Form.Group controlId="NomConCli">
                        <Form.Label>Nombre</Form.Label>
                        <Form.Control
                            type="text"
                            name="NomConCli"
                            value={form.NomConCli}
                            onChange={handleChange}
                            required
                        />
                    </Form.Group>
                </Col>
                <Col md={12}>
                    <Form.Group controlId="NIFConCli">
                        <Form.Label>NIF</Form.Label>
                        <Form.Control
                            type="text"
                            name="NIFConCli"
                            value={form.NIFConCli || ''}
                            onChange={handleChange}
                            maxLength={20}
                        />
                    </Form.Group>
                </Col>
                <Col md={12}>
                    <Form.Group controlId="CarConCli">
                        <Form.Label>Cargo</Form.Label>
                        <Form.Control
                            type="text"
                            name="CarConCli"
                            value={form.CarConCli || ''}
                            onChange={handleChange}
                        />
                    </Form.Group>
                </Col>
                <Col md={12}>
                    <Form.Group controlId="EmaConCli">
                        <Form.Label>Email</Form.Label>
                        <Form.Control
                            type="email"
                            name="EmaConCli"
                            value={form.EmaConCli || ''}
                            onChange={handleChange}
                        />
                    </Form.Group>
                </Col>
                <Col md={12}>
                    <Form.Group controlId="TelFijConCli">
                        <Form.Label>Teléfono fijo</Form.Label>
                        <Form.Control
                            type="text"
                            name="TelFijConCli"
                            value={form.TelFijConCli || ''}
                            onChange={handleChange}
                            maxLength={9}
                        />
                    </Form.Group>
                </Col>
                <Col md={12}>
                    <Form.Group controlId="TelCelConCli">
                        <Form.Label>Teléfono móvil</Form.Label>
                        <Form.Control
                            type="text"
                            name="TelCelConCli"
                            value={form.TelCelConCli || ''}
                            onChange={handleChange}
                            maxLength={9}
                        />
                    </Form.Group>
                </Col>
            </Row>
        </BaseEditModal>
    );
};

export default EditarContactoModal;