import React from "react";
import useReports from "../hooks/useReports";
import { Modal, Form, Button, Spinner } from "react-bootstrap";
import success from "../../../../assets/images/illustration/report.png";

const UserNavbar = ({onClose}) => {

    const { report, setReport, loading, error, successReport, handleSubmit } = useReports();

    return (
        <>
        {/* <Modal show={show} onHide={handleClose} centered> */}
            {successReport?(
                <Modal.Body className='p-4 d-flex flex-column items-center'>
                    <h4 className='mb-4 fw-bold text-dark'>Issue report <span className='text-blue'>received</span>!</h4>
                    <img src={success} alt="" />
                    <p className='my-3 text-muted fw-light'>Thank you for letting us know. We’ll investigate the issue and work on resolving it promptly.</p>
                    <Button variant="gd" className="py-2 px-5 mt-4 w-50 rounded-35" onClick={onClose}>Done</Button>
                </Modal.Body>
            ):(
                <>
                    <Modal.Header closeButton>
                      <Modal.Title>Report an Issue</Modal.Title>
                    </Modal.Header>
                    <Modal.Body className='p-4 d-flex flex-column items-center'>
                        <Form onSubmit={handleSubmit} className="w-100 p-3 border rounded-3">
                            <Form.Group className="mb-3" controlId="reportTextarea">
                            <Form.Label className="text-black fw-bold">In order to improve our service, kindly share your experience.</Form.Label>
                            <Form.Control
                                as="textarea"
                                rows={5}
                                placeholder="Type your report here..."
                                value={report}
                                onChange={(e) => setReport(e.target.value)}
                                required
                            />
                            </Form.Group>
                            <Button variant="gd" type="submit" className="py-2 px-5 w-100 rounded-35" disabled={loading || !report}>
                                {loading ? <Spinner animation="border" size="sm" /> : 'SEND'}
                            </Button>
                        </Form>
                    </Modal.Body>
                </>
            )
            }
        {/* </Modal> */}
        </>
    );
};

export default UserNavbar;
