import { Container, TextField } from "@mui/material";
import Col from "react-bootstrap/esm/Col";
import Row from "react-bootstrap/esm/Row";
import TextWithBorder from "../components/TextWithBorder";
import Button from 'react-bootstrap/Button';
import { useLocation, useNavigate } from "react-router-dom";
import { useState } from "react";


// Order Summary Subheadings Component
function SummarySubheading ({title}) {
    return (
    <Col style={{display:"flex", justifyContent:"center"}}>
        <h5>{title}</h5>
    </Col>
    
    )
}

// Order Summary Row Component
function OrderSummaryRow ({FoodItem}) {
    const titleColStyle = {
        display:"flex", justifyContent:"center"
    }
    console.log(FoodItem, " food item")
    return (
    <Row style={{marginBottom:"0.2em"}}> 
        <Col  style={{display:"flex", justifyContent:"center", flexDirection:"column"}}>
                <h6> {FoodItem.title} </h6>
                <p> {FoodItem.meal_description}</p>
        </Col>
        <Col style={titleColStyle}> <h6> {`$${FoodItem.price}`} </h6> </Col>
        <Col style={titleColStyle}> <h6> {`${FoodItem.amount}`} </h6></Col>
        <Col style={titleColStyle}> <h6> {`$${FoodItem.total_price}`} </h6> </Col>
        
    </Row>
)
}

export default function OrderSummary() {
    const [barRequirements, setBarRequirements] = useState('')
    const [specialDietaryRequirements, setSpecialDietaryRequirements] = useState('')
    const location = useLocation()
    const navigateTo = useNavigate() 
    const meals = location.state?.mealData
    console.log(location.state?.bookingDetails, "room details obj")
    const roomName = location.state?.bookingDetails.room_name
    const eventDuration = location.state?.bookingDetails.event_duration
    const roomPrice = eventDuration == "half-day" ? 15 : 20
    var total = [...meals].reduce((acc, meal)=> acc + meal.total_price, 0);
    total += roomPrice

    const handleBarRequirements = (event) => {
        setBarRequirements(event.target.value)
    }

    const handleDietaryRequirements = (event) => {
        setSpecialDietaryRequirements(event.target.value)
    }

    const HandleSubmit = () => {
        const cateringInfor = {
            "meal": [...meals],
            "bar_requirements": barRequirements,
            "special_dietary_requirements": specialDietaryRequirements,
            "user_token": location.state?.token,
            "total_fee": total,
            "booking_id": location.state?.bookingDetails.booking_id
        }
        console.log(cateringInfor, "meals to be sent")
        
        const requestOptions = {
            method: "POST",
            headers: {"Content-Type":"application/json"},
            body: JSON.stringify(cateringInfor)
        }

        async function sendCateringInfo() {
            const response = await fetch("http://127.0.0.1:8000/sabreapi/v1/catering/", requestOptions);
        }

        sendCateringInfo()
        navigateTo("/feedback")
    }

    return (
        <>
        {/* Order Summary Main Heading */}
        <div style={{display:"flex", justifyContent:"center", marginBottom:"1 em"}}> 
            <h3> Order Summary </h3>
        </div>

        {/* Order Summary Content */}
        <Container> 
            {/* Order Summary Sub-headings*/}
             <Row> 
                <SummarySubheading title={"Item"}/>
                <SummarySubheading title={"Unit Price"}/>
                <SummarySubheading title={"Quantity"}/>
                <SummarySubheading title={"Total Price"}/>
                <hr/>
            </Row>
   
            {/* Food Item Rows */}
            <div style={{maxHeight:"500px", overflow:"auto"}}>
            
            {[...meals].map((meal)=>
                <OrderSummaryRow key={meal.id} FoodItem={meal}/>
            )}
            <Row> 
                <SummarySubheading title={`Room Fee (${roomName})`}/>
                <SummarySubheading title={`$${roomPrice}`}/>
                <SummarySubheading title={"-"}/>
                <SummarySubheading title={`$${roomPrice}`}/>
            </Row>

            </div>
            
            {/* Order Summary Total */}
            <Row> 
                <Col style={{display:"flex"}}>
                    {/* <h4 style={{display:"flex", justifyContent:"center", marginTop:"auto"}}>
                        Total
                    </h4>  */}
                 </Col>
                <Col> </Col>
                <Col> </Col>
                <Col> 
                    <hr/>
                    <h5 style={{display:"flex", justifyContent:"center"}}>
                        <TextWithBorder text={`$${total}`}/>
                    </h5>
                </Col>
                {/* <hr/> */}
            </Row>
        </Container>
        
        {/* Bar and Dietary requirements text fields */}
        <Container style={{marginTop:"2em"}} >
            <h6> Bar requirements: </h6>
            <div style={{marginBottom:"2em"}}>
                <TextField
                    sx={{
                        width: 560,
                        display: 'flex',
                    }}
                    id="outlined-multiline-static"
                    label="Enter bar requirements..."
                    multiline
                    rows={2}
                    variant="outlined"
                    onChange={handleBarRequirements}
                />
            </div>
            <h6> Special dietary requirements:</h6>
            <div style={{marginBottom:"2em"}}>
                <TextField
                    sx={{
                        width: 560,
                        display: 'flex',
                    }}
                    id="outlined-multiline-static"
                    label="Enter any special dietary requirements..."
                    multiline
                    rows={2}
                    variant="outlined"
                    onChange={handleDietaryRequirements}
                />
            </div>
            <h6 style={{marginBottom:"2em"}}>Note: Prices may change due to additional requirements</h6>
            <Button variant='primary'
             size='lg'
                    onClick={HandleSubmit}
                    style={{backgroundColor:'#282F38', border:'none', marginTop:'2em', marginBottom:'2em', alignSelf:'center'}}
                >
                    Submit
              </Button>
        </Container>
        </>
    )
}