import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import { useEffect, useState } from 'react';
import Form from 'react-bootstrap/Form';
import ToastContainer from 'react-bootstrap/ToastContainer';
import Button from 'react-bootstrap/Button';
import Toast from 'react-bootstrap/Toast';
import { useLocation } from 'react-router-dom';
import BookingDetailsSubmissionModal from '../components/BookingDetailsSubmissionModal'


function BookingForm() {
    const [openModal, setOpenModal] = useState(false);
    const [bookingResponse, setBookingResponse] = useState(null);
    const [success, setSuccess] = useState(null);
    const [showSuccessToast, setShowSuccessToast] = useState(false);
    const [showErrorToast, setShowErrorToast] = useState(false);
    const toggleShowSuccess = () => setShowSuccessToast(!showSuccessToast);
    const toggleShowError = () => setShowErrorToast(!showErrorToast);

    const location = useLocation();
    const initialData = {
        companyName: '',
        EventLeaderName: '',
        phone: '',
        physicalAddress: '',
        VAT: '',
        emailAddress: '',
        eventType: '',
        eventDuration: '',
        eventDate: '',
        eventName: '',
        numberOfDelegates: '',
        eventStartTime: '',
        eventEndTime: '',
        room: '',
        bookingId:'',
        // cateringPackage: '',
        // teaMealBreakTime: '',
        // specialDietaryReqs: '',
        // barRequirements: '',
        token: ''
    }
    const [bookingInfo, setBookingInfo] = useState(initialData);
    useEffect(() => {
        const data = {
            ...bookingInfo,
            eventDate: location.state?.date,
            eventStartTime: location.state?.start_time,
            eventEndTime: location.state?.end_time,
            room: location.state?.room,
            numberOfDelegates: location.state?.delegates,
            token: location.state?.token
        }
        setBookingInfo(data)
    },[])
    const handleInputChange = (e) => {

        const {name, value} = e.target

        const data = {
            ...bookingInfo,
        [name]: value
        }
        setBookingInfo(data);
        console.log(bookingInfo)
    }
    
    const handleSubmit = (e) => {
            const requestOptions = {
            method: "POST",
            headers: { "Content-Type": "application/json" },
                body: JSON.stringify(
                bookingInfo
                )
            };

        async function attemptBooking() {
            console.log("called attempt boooking.")
            console.log(bookingInfo);
            const response = await fetch("http://127.0.0.1:8000/sabreapi/v1/index/", requestOptions); 
            const bookingResult = await response.json();

            if (bookingResult.success == true) {
                console.log("successfull")
                setOpenModal(true);
                setSuccess(true);  
                console.log("success")
                setBookingResponse(null);

                const data = {
                    ...bookingInfo,
                ["bookingId"]: bookingResult.booking_id
                }
                setBookingInfo(data)
            }
            else {
                setSuccess(false);
                // console.log(bookingResult)
                console.log("failure")
                setBookingResponse(bookingResult.errors)
                alert(`Sorry, some things went wrong. Please check the errors below and try again.\n\n${bookingResult.errors}`)
                setShowErrorToast(true)
            }
           
        }

        attemptBooking();    
    }
    
    return (
        <div>{
            
            success != null ? (
                success == true ? (
                    <ToastContainer position='middle-center'>
                  <Toast  bg="success" show={showSuccessToast} onClose={toggleShowSuccess}>
            <Toast.Header >
              
              <strong className="me-auto">✅ Success!</strong>
            </Toast.Header>
            <Toast.Body>Your request was successfull! Please check your email to verify and you should be all set.</Toast.Body>
                        </Toast>  
                        </ToastContainer>
                ) : (
                        <ToastContainer position='middle-center'>
                    <Toast bg="danger" show={showErrorToast} onClose={toggleShowError}>
            <Toast.Header >
              
              <strong  className="me-auto">❌ Error</strong>
            </Toast.Header>
                <Toast.Body>
                                <h6>Something went wrong. Please refer to the list below and correct your booking</h6>
                                <ul>
                                    {Object.entries(bookingResponse).map(([key, value]) => (
                                        <li key={key}><strong>{key}</strong>: {value? value: ""}</ li>
                                    ))}
                                </ul>
                                
                </Toast.Body>
          </Toast>    
          </ToastContainer>              
            )
            ):null
        }  
           
            <Form noValidate  onSubmit={handleSubmit} >
            <Row className='mb-3 mt-5'>
                <Form.Group as={Col} md="4" controlId="validationCustom01">
                    <Form.Label><strong>Company name</strong></Form.Label>
                    <Form.Control
                            required
                        name="companyName"
                        type="text"
                        placeholder='Enter company name'
                        onChange={handleInputChange}
                    />
                    <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                </Form.Group>
                <Form.Group as={Col} md="4" controlId="validationCustom02">
                    <Form.Label><strong>Event Leader name</strong></Form.Label>
                    <Form.Control
                            required
                            name="EventLeaderName"
                        type="text"
                            placeholder="Enter leader name"

                        onChange={handleInputChange}
                    />
                    <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                </Form.Group>
                <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label><strong>Phone</strong></Form.Label>
          <Form.Control
            required
                            type="number"
                            name="phone"
                            placeholder="Enter phone number"

            onChange={handleInputChange}
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
            </Row>
            <Row className='mb-3 mt-3' >
                <Form.Group as={Col} md="4" controlId="validationCustom01">
                    <Form.Label><strong>Physical Address</strong></Form.Label>
                    <Form.Control
                        required
                            type="text"
                            name="physicalAddress"
                            placeholder="Enter physical address"

                        onChange={handleInputChange}
                    />
                    <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                </Form.Group>
                <Form.Group as={Col} md="4" controlId="validationCustom02">
                    <Form.Label><strong>VAT number</strong></Form.Label>
                    <Form.Control
                        required
                            type="text"
                            name="VAT"
                            placeholder="Enter VAT"

                        onChange={handleInputChange}
                    />
                    <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                </Form.Group>
                <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label><strong>Email Address</strong></Form.Label>
          <Form.Control
            required
                            type="email"
                            name="emailAddress"
                            placeholder="example@email.com..."

            onChange={handleInputChange}
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
            </Row>
            <Row className='mb-3 mt-3' >
                 <Form.Group as={Col} md="4" controlId="validationCustom01">
                    <Form.Label><strong>Event Type</strong></Form.Label>
                    <Form.Control
                        required
                            type="text"
                            name="eventType"
                            placeholder="Enter event type"

                        onChange={handleInputChange}
                    />
                    <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                </Form.Group>
                <Form.Group as={Col} md="4" controlId="validationCustom02">
                    <Form.Label><strong>Event Duration</strong></Form.Label>
                    <Form.Control
                            required
                            as="select"
                            type="text"
                            name="eventDuration"
                            placeholder="Enter event name"
                        onChange={handleInputChange}
                        >
                            <option value="">Select a duration</option>
                             <option value="half-day">Half Day</option>
                            <option value="full-day">Full Day</option>
                            {/* <option value="over-a-day">More than a day</option> */}
                      
                            </Form.Control>
                    <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                </Form.Group>
                <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label><strong>Event Date</strong></Form.Label>
          <Form.Control
            required
            type="date"
                            placeholder="Enter event date"
                            name="eventDate"
                            defaultValue={location.state?.date}
            onChange={handleInputChange}
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
            </Row>
            <Row className='mb-3 mt-3' >
                <Form.Group as={Col} md="4" controlId="validationCustom01">
                    <Form.Label><strong>Event Name (If Applicable)</strong></Form.Label>
                    <Form.Control
                        required
                            type="text"
                            name="eventName"
                            placeholder="Enter event name"

                        onChange={handleInputChange}
                    />
                    <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                </Form.Group>
                <Form.Group as={Col} md="4" controlId="validationCustom02">
                    <Form.Label><strong>Number of Delegates</strong></Form.Label>
                    <Form.Control
                        required
                            type="number"
                            name="numberOfDelegates"
                            placeholder="Enter number of delegates"
                            defaultValue={location.state?.delegates}
                        onChange={handleInputChange}
                    />
                    <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                </Form.Group>
                <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label><strong>Event Start Time</strong></Form.Label>
          <Form.Control
            required
                            type="time"
                            name="eventStartTime"
                            placeholder="Enter Start Time"
                            defaultValue={location.state?.start_time}
            onChange={handleInputChange}
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
            </Row>
            <Row className='mb-3 mt-3' >
                 <Form.Group as={Col} md="4" controlId="validationCustom01">
                    <Form.Label><strong>Event End Time</strong></Form.Label>
                    <Form.Control
                        required
                            type="time"
                            name="eventEndTime"
                            placeholder="Enter event Time"
                            defaultValue={location.state?.end_time}
                        onChange={handleInputChange}
                    />
                    <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                </Form.Group>
                <Col></Col>
                <Form.Group as={Col} md="4" controlId="validationCustom02">
                    <Form.Label><strong>Room</strong></Form.Label>
                    <Form.Control
                        required
                            type="text"
                            name="room"
                            defaultValue={location.state?.room}
                            onChange={handleInputChange}

                    />
                    <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                </Form.Group>
                {/* <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label><strong>Catering Package</strong></Form.Label>
                        <Form.Control
                            as="select"
            required
            name="cateringPackage"
            placeholder="Enter Catering package"
                            onChange={handleInputChange}

                        >
                            <option value="">Select Catering Package</option>
    <option value="gold">gold</option>
    <option value="silver">silver</option>
    <option value="bronze">bronze</option>
                            </Form.Control>
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group> */}
            </Row>
            <Row className='mb-3 mt-3' >
                {/* <Form.Group as={Col} md="4" controlId="validationCustom01">
                    <Form.Label><strong>Tea/Meal/Break Time</strong></Form.Label>
                        <Form.Control
                            as="select"
                        required
                            name="teaMealBreakTime"
                            placeholder="Enter Meal Time"
                        onChange={handleInputChange}
                        
                        ><option value="">Select Meal Time</option>
                             <option value="arrival">arrival</option>
                            <option value="mid-morning">mid-morning</option>
                            <option value="lunch">lunch</option>
                            <option value="afternoon">afternoon</option>
                            <option value="evening">evening</option>
                            </Form.Control>
                    <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                 </Form.Group> */}
                {/* <Form.Group as={Col} md="4" controlId="validationCustom02">
                    <Form.Label><strong>Special Dietary Reqs</strong></Form.Label>
                    <Form.Control
                        required
                            type="text"
                            name="specialDietaryReqs"
                        placeholder="Enter Dietary Requirements"
                        onChange={handleInputChange}

                    />
                    <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                </Form.Group>  */}

                {/* <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label><strong>Bar requirements</strong></Form.Label>
          <Form.Control
            required
                            type="text"
                            name="barRequirements"
            placeholder="Enter Bar requirements"
                            onChange={handleInputChange}

          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group> */}

            </Row>
            </Form>
            <Row className='mb-3 mt-3 justify-content-center'>
                <Button style={
                    {
                        width: "18em"
                    }
                } variant='primary'
                    size=''
                    onClick={handleSubmit}
                >Make a Booking</Button>
            </Row>
            {openModal && <BookingDetailsSubmissionModal bookingDetails={bookingInfo}/>}
        </div>
        
        
    )
}

export default function BookingFormPage() {
    return (
        <Container >
            <BookingForm />
        </Container>
)
}