import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import { useState } from "react";
import { Button, Modal } from "react-bootstrap";

export default function FactoryForm() {
    const [show, setShow] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false)

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    const [formData, setFormData] = useState({ name: "", phone: "" })

    const handleChange = (e) => {
        setFormData({ ...formData, [e.target.name]: e.target.value })
    }

    const handleSubmit = async (e) => {
        e.preventDefault();
        setIsSubmitting(true);
        try {
            await login(formData.username, formData.password);
            addToast("Login successful!", "success");
            navigate("/dashboard", { replace: true });
        } catch (error) {
            addToast(error.message || "Login failed", "danger");
        } finally {
            setIsSubmitting(false);
        }
    };
    return (
        <div>
            <Form onSubmit={handleSubmit}>
                <InputGroup className="mb-3">
                    <InputGroup.Text id="name">Name</InputGroup.Text>
                    <Form.Control
                        name="name"
                        placeholder="name"
                        aria-label="name"
                        aria-describedby="name"
                        value={formData.name}
                        onChange={handleChange}
                        required
                    />
                </InputGroup>
                <InputGroup className="mb-3">
                    <InputGroup.Text id="name">Phone</InputGroup.Text>
                    <Form.Control
                        name="phone"
                        placeholder="phone"
                        aria-label="phone"
                        aria-describedby="phone"
                        value={formData.phone}
                        onChange={handleChange}
                        required
                    />
                </InputGroup>
                <div className='d-flex justify-content-end gap-2'>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                    <Button variant="primary" type="submit" disabled={isSubmitting}>
                        {isSubmitting ? "Edit !" : "Edit"}
                    </Button>
                </div>
            </Form>
        </div>
    )
}