// import { dividerClasses } from "@mui/material";
import Card from './Card'
import { useState, useEffect } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import ButtonsC from "../components/ButtonsC";
import backgroundImage from '../assets/Homepage_background.jpeg'
import Badge from '@mui/material/Badge';
import IconButton from '@mui/material/IconButton';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import CateringOrderCartModal from "../components/CateringOrderCartModal"
import { useLocation } from 'react-router-dom';

function ShoppingCart({selectedMeals, setSelectedMeals}) {
  const [openModal, setOpenModal] = useState(false);
  const token = useLocation().state?.token
  const roomName = useLocation().state?.room
  const eventDuration = useLocation().state?.eventDuration
  const bookingId = useLocation().state?.bookingId
  const bookindDetails = {"room_name":roomName, "event_duration":eventDuration, "booking_id":bookingId, }
  function handleOpen(){
    return setOpenModal(true)
  }

  return (

    <div>
        <div>
        <IconButton aria-label="cart" style={{ color: 'black' }} onClick={handleOpen}>
          <Badge badgeContent={selectedMeals.size} color="warning">
            <ShoppingCartIcon style={{ fontSize: '40px', color: 'black' }}/>
          </Badge>
          <div style={{ fontSize: '12px', marginLeft: '5px' }}>Cart</div>
        </IconButton>
        </div>
      <div>
      
      {openModal && <CateringOrderCartModal openModal={openModal} setOpenModal={setOpenModal} meals={selectedMeals} setMeals={setSelectedMeals} token={token} bookingDetails={bookindDetails}/>}

      </div>
    </div>
  )
}


function TopNavigationBar({selectedMeals, setSelectedMeals}){
    return(
      <div>
        <nav className="navbar navbar-expand-lg bg-body-tertiary" style={{height: '70px'}}>
          <div className="container-fluid" style={{ backgroundColor: '#EAF2F8'}}>
            <a className="navbar-brand" href="#">
              <strong>
                <h1 style={{fontWeight: 'bold', fontSize: '50px', textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)' }}>Our Menu</h1>
              </strong>
            </a>
            <ShoppingCart selectedMeals={selectedMeals} setSelectedMeals={setSelectedMeals}/>
          </div>
        </nav>
        </div>
    )
}

function MealTiles({setSelectedMeals, selectedMeals}) {
  const [filteredMeals, setFilteredMeals] = useState()
  const [displayTiles, setDisplayTiles] = useState(false);
  const [meals, setMeals] = useState([])
  const location = useLocation()
  const numberOfDelegates = location.state?.numberOfDelegates

  useEffect(() => {
    async function fetchMeals() {
      const response = await fetch("http://127.0.0.1:8000/sabreapi/v1/menu/");
      const menu = await response.json();
      setMeals(menu)
    }
    fetchMeals();
  },[])

  // filter according to meal type and tier
  const filterItems = (catering_package, mealtime) => {

    const displayMeals = meals.filter((meal) => (
         (meal.catering_package.toLowerCase() === catering_package.toLowerCase()) && (meal.meal_time.toLowerCase() === mealtime.toLowerCase())
         ))

    setFilteredMeals(displayMeals)
    setDisplayTiles(true)
  }

  return (
    <div className='container-fluid'>
      <div className='row'>
        <ButtonsC
          filterItems = {filterItems}
        />
        {displayTiles ? (
          <Card item={filteredMeals} setSelectedMeals={setSelectedMeals} selectedMeals={selectedMeals} numberOfDelegates={numberOfDelegates}/>
        ) : (
          <div
            className='container-fluid'
            style={{
              backgroundImage: `url(${backgroundImage})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              minHeight: '100vh',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center', // Center content vertically
              alignItems: 'center', // Center content horizontally
              color: 'white', // Text color
              fontSize: '40px', // Adjust font size as needed
              textAlign: 'center',
              fontFamily: 'Arial, sans-serif',
              textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)', // Optional text shadow
              marginTop: '10px',
              opacity: 0,
              animation: 'fadeIn 1s ease-in-out forwards', 
            }}>
              <p><strong>Welcome to our Catering Experience!</strong><br/>
              Discover a world of culinary delights tailored just for you. Click on the buttons on the top left to explore our exquisite offerings.
              <br/>Get selecting, Get Savoring!</p>
              <style>
                {`
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      `}
  
              </style>
          </div>
        )}
      </div>
    </div>
  )
  

}



export default function Homepage() {
  const [selectedMeals, setSelectedMeals] = useState(new Set())
    return (
        <div>
            <TopNavigationBar selectedMeals = {selectedMeals} setSelectedMeals={setSelectedMeals}/>
            <MealTiles setSelectedMeals={setSelectedMeals} selectedMeals={selectedMeals}/>
        </div> 
    )
  }