import Container from "react-bootstrap/esm/Container"
import RoomCarousel from "../components/RoomCarousel"
import Row from "react-bootstrap/esm/Row"
import Col from "react-bootstrap/esm/Col"
import Alert from '@mui/material/Alert';
import Button from '@mui/material/Button';
import SearchIcon from '@mui/icons-material/Search';
import AllEquipmentModal from "../components/AllEquipmentModal"
import AllFunctionsModal from "../components/AllFunctionsModal"
import SearchModal from "../components/SearchModal"
import LoginModal from "../components/LoginModal";
import { useEffect, useState } from "react"
import { useNavigate } from "react-router-dom";
import './RoomDetail.css'
import { useLocation } from "react-router-dom"
import { useSelector } from "react-redux";



export default function RoomDetail() {

    const location = useLocation();
    const navigateTo = useNavigate();
    const room_id = location.state?.room_id 
    const bookingDetails = location.state?.bookingDetails
    const [room, setRoom] = useState(null)
    const [openLogin, setOpenLogin] = useState(false);
    const [modalShow, setModalShow] = useState(false);
    const [show, setShow] = useState(false);
    const [equipmentModalShow, setEquipmentModalShow] = useState(false) 
    const loginStatus = useSelector(status => status.loginStatus);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);


    useEffect(() => {
        async function fetchRoom() {
            const response = await fetch(`http://127.0.0.1:8000/sabreapi/v1/room/${room_id}`);
            const roomData = await response.json();
            setRoom(roomData)
        }
        fetchRoom();
        
    }, []);
    

    const handleReserve = () => {
        if (loginStatus.isLoggedIn === true) {
            const stateBookingDetails = {token: loginStatus.loginToken, room:room.name, ...bookingDetails}
            navigateTo('/book', {state: stateBookingDetails})
        } else {
            setOpenLogin(true);
        }  
    }
    
    return (
        <div>
            <LoginModal open={openLogin} setOpenLogin={setOpenLogin} />
            <Container className="mt-3 d-flex justify-content-space-between align-items-center">
                <h1>{room?.name} </h1>   
            {!bookingDetails?.start_time && <Container>
                    <SearchModal show={show} handleClose={handleClose} />
                    <Alert severity="info" action={
          <Button color="inherit" size="small" startIcon={<SearchIcon />} onClick={handleShow}>
            Search
          </Button>

        }>NB. You cannot make a booking until you've entered your event details</Alert>
            </Container>}

            {bookingDetails?.start_time && <Button className="reserve-button" sx={{display: "flex", marginLeft:"53%"}} size="large" variant="contained" onClick={handleReserve}> Reserve Room! </Button>}

            </Container>
            <Container className="mt-5">
                <Row>
                    <Col>
                        <Row style={{borderLeft: "2px solid #DDDD"}}>
                            <h4>What this place offers</h4>
                        </Row>
                        <Container >
                            <ul className="room-list-styling">
                                
                                {room?.amenity.map((idx, amenity) => {if (amenity <= 4) return (

                                <li key={idx}>
                                    <Container className="mt-2 d-flex justify-content-center left-boarder" >
                                        <Container>{room.amenity[amenity]}</Container>
                                           
                                    </Container>
                                </li>
                                  )})}
                                
                            </ul>    
                        </Container>

                    </Col>
                    <Col>
                    <RoomCarousel /></Col>
                </Row>
                
            </Container>
            <Container className="mt-5 d-flex justify-content-center">
                    
    
            </Container>
            
            <Container className="mt-4">
                <Row>

                <Col xs={6} >
                        <Row>
                            <Container className="left-boarder">
                                <h4>Available Equipment</h4>
                            </Container> 
                        </Row>
                      
                            <Container  >
                            
                            <ul className="room-list-styling">
            {room?.equipment.map((idx, name) => {if (name <= 4) return (
            <li key={idx}>
                <Container className="mt-2 d-flex justify-content-center left-boarder" >
                    <Container>{room.equipment[name]}</Container>
                    
                </Container>
            </li>
  )})}
                            </ul>
                        </Container>

                        <Row>
                        <AllEquipmentModal equipment={room?.equipment} show={equipmentModalShow} onHide={() => setEquipmentModalShow(false)} />
                            
                            <div className="amenities-button" onClick={() => setEquipmentModalShow(true)}>
                               Show all equipment
                            </div> 
                            
                        </Row>

                    </Col>

                    <Col xs={6} ><Row>
                        <Container className="left-boarder"><h4>Room Functions</h4></Container>
                        
                    </Row>
                        <Container  >
                            
                            <ul className="room-list-styling">

                             {room?.functions.map((idx, ftn) =>{ if (ftn <= 4) return (
                                 <li key={idx}>
                                <Container className="mt-2 d-flex justify-content-center left-boarder">
                                    <Container>
                                       {room.functions[ftn]} 
                                    </Container>
                                </Container>
                                    
                              </li>
                             )}

                             )
                                }
                                
                            </ul>
                        </Container>

                        <Row>
                        <AllFunctionsModal equipment={room?.functions} show={modalShow} onHide={() => setModalShow(false)} />
                            
                            <div className="amenities-button" onClick={() => setModalShow(true)}>
                               Show all functions
                            </div> 
                            
                        </Row>
                    </Col>

                   
                </Row>
               
            </Container>

                

        </div>
    )
}