import * as React from 'react';
import Modal from '@mui/material/Modal';
import { Box, Typography } from '@mui/material';
import { Container } from '@mui/material';
import Col from 'react-bootstrap/esm/Col';
import Row from 'react-bootstrap/esm/Row';
import Button from 'react-bootstrap/Button';
import TextWithBorder from './TextWithBorder';
import InputStepper from './InputStepper';
import BinIcon from './Icons/BinIcon';
import { IconButton } from '@mui/material';
import { useNavigate } from 'react-router-dom'; 

const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 600,
bgcolor: 'background.paper',
border: '2px solid #000',
borderRadius: '20px',
boxShadow: 24,
p: 4,
};

function FoodItemRow({FoodItem, deleteMeal,setTotalPrice, updateTotal, runningTotal, setRunningTotal, initialTotal}) {
  const [amount, setAmount] = React.useState(FoodItem.amount)

  function handleAmount(val){
    setAmount(val)
    FoodItem.total_price = val * FoodItem.price
    FoodItem.amount = amount
    updateTotal()
    
  }

  return (
<>
<Row style={{display:'flex', backgroundColor:''}}>

    <Col style={{display:'flex', backgroundColor:'', width:'50%', justifyContent:'flex-start', alignItems: 'center'}}>
        <h5 style={{margin:'0'}}> {FoodItem.title} </h5>
    </Col>

    <Col style={{display:'flex', justifyContent:'space-between', alignContent:'center', backgroundColor:''}}>
  
    <InputStepper initialValue={FoodItem.amount} handleAmount={handleAmount}/>
    <IconButton style={{padding:"0.1em", backgroundColor:""}} onClick={() => deleteMeal(FoodItem)}>
       <BinIcon/>
    </IconButton>
   
    <h5 style={{margin:'0'}}> {`$${FoodItem.price * amount}`}</h5>
    </Col>
    </Row>

    <Row style={{display:'flex', backgroundColor:''}}>
    <div style={{display:'flex', width:'50%',  boxSizing: 'border-box', backgroundColor:''}}>
        <p>{FoodItem.meal_description}</p>
    </div><hr/>
</Row>  
</>
)
}


export default function CateringOrderCartModal({openModal, setOpenModal, meals, setMeals, token, bookingDetails}) {

  const [runningTotal, setRunningTotal] = React.useState({})

  // find initial total price
  const mealList = [...meals]
  const initialTotal = mealList.reduce((acc, obj) => acc + obj.total_price, 0)
  const [totalPrice, setTotalPrice] = React.useState(initialTotal)

  function deleteMeal(meal) {
    setMeals((prevMeals) => new Set([...prevMeals].filter((curMeal) => curMeal != meal)))
    updateTotal()
    console.log(totalPrice, " ...total price")
  }

  function updateTotal() {
    const totalPrice = [...meals].reduce((acc, obj) => acc + obj.total_price, 0)
    setTotalPrice(totalPrice)
  }

  React.useEffect(() => {updateTotal},[meals])

  const handleClose = () => setOpenModal(false);
  const navigateTo = useNavigate();
  

  return (
    
    <div style={{width:"700"}}>
      <Modal
        open={openModal}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        {/* <CateringOrderCart/> */}
      
        <Box sx={style}>
        
        <div style={{ display: 'flex', flexDirection: 'column', height: '100%'}}>

    {/* Order Cart Heading */}
    <div style={{display:'flex', justifyContent: 'center', alignItems: 'center',}}>
        <h2 style={{marginTop:'0em', marginBottom: '-0.1em'}}> Order Cart</h2> 
    </div>
    <hr style={{height: '0.15em', backgroundColor:'#282F38', marginBottom:'2em'}}/> 

    {/* Cart Body */}
    {meals.size? <div> 
    {/* Card details */}
    <Container style={{maxHeight:"400px", overflow:"auto"}}>   
      {
        mealList.map((meal) => 
        <FoodItemRow key={meal.id} FoodItem={meal} deleteMeal={deleteMeal} setTotalPrice = {setTotalPrice} runningTotal={runningTotal} setRunningTotal={setRunningTotal} initialTotal = {initialTotal} updateTotal = {updateTotal}/> 
      )
      } 
    </Container>

    {/* Total Price */}
    <Container style={{marginTop:"auto", marginBottom:"none"}}>
            <Row style={{display:'flex', backgroundColor:''}}>

     <Col style={{display:'flex', backgroundColor:'', width:'50%', justifyContent:'flex-start', alignItems: 'center'}}>
         <h3> Total</h3>
     </Col>

     <Col style={{display:'flex', justifyContent:'flex-end', alignContent:'center', backgroundColor:''}}>
         <h4> 
           
           <TextWithBorder text={`$${totalPrice}`}/> 
         
         </h4>
     </Col>
 </Row>
 </Container>

 <Container  style={{display:'flex' ,marginTop:'auto', justifyContent:"center"}}>
     <hr style={{height: '0.1em', backgroundColor:'#282F38', marginBottom:'0em', marginTop:'0.2em'}}/> 
      <Button variant='primary'
      size='lg'
             onClick={()=> navigateTo("/order-summary", {state: {mealData:meals, token:token, bookingDetails:bookingDetails}})}
             style={{backgroundColor:'#282F38', border:'none', marginTop:'2em', marginBottom:'2em', alignSelf:'center'}}
         >
             Checkout
       </Button>
 </Container>
 </div>    
  :
  <div style={{display:"flex", justifyContent:"center"}}>
     <h5> Cart is currently empty </h5>
  </div>
 
 }
   
 </div>

        </Box>
      </Modal>
      </div>
 
  );
}