import Container from "react-bootstrap/esm/Container"
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import leadersPath from '../assets/Leaders.jpeg'
import philosophersPath from '../assets/Philosophers.jpeg'
import visionariesPath from '../assets/Visionaries.jpeg'
import legendsPath from '../assets/legends.webp'
import investorsPath from '../assets/investors.webp'
import explorersPath from '../assets/Explorers.jpeg'
import './Homepage.css'
import WifiIcon from "../components/icons/WifiIcon"
import WhiteBoardIcon from "../components/icons/WhiteBoardIcon"
import RoomCard from "../components/RoomCard"
import TVIcon from "../components/icons/TVIcon"
import AirConditioningIcon from "../components/Icons/AirConditioningIcon"
import SpeakerIcon from "../components/Icons/SpeakerIcon"
import { useState, useEffect } from "react"
import AllAmenitiesModalHome from "../components/AdditionalAmenitiesModal"
import { useNavigate } from 'react-router-dom';
import FilterRoomsNew from "../components/filterRoomsNew"



export default function Homepage() {
    const [rooms, setRooms] = useState([])
    const [validRooms, setValidRooms] = useState([])
    const [bookingDetails, setbookingDetails] = useState({})

    useEffect(() => {
        async function fetchRooms() {
            const response = await fetch("http://127.0.0.1:8000/sabreapi/v1/rooms/");
            const rooms = await response.json();
            setRooms(rooms);          
        }
        fetchRooms();
    }, [])
    
    function handleRooms(updatedRooms, bookingDetails) {
        setValidRooms([])
        setbookingDetails(bookingDetails)

        let filtered_rooms = []
        for (let i=0; i< updatedRooms.length; i++) {
            let room_id = updatedRooms[i][0]
          
            for (let j=0; j<rooms.length;j++) {
    
                if (rooms[j].id == room_id) {
                    filtered_rooms.push(rooms[j])
                }
            }
        }
        setValidRooms(filtered_rooms)
    }
   
    // Room display function, for displaying all rooms on the home pages
    function DisplayRooms({roomsData}) {

        const navigateTo = useNavigate();
       
        return (
            roomsData.map((room_data) => {

                    let roomPath = ""

                   switch (room_data.name) {
                        case "Inventors":
                            roomPath = investorsPath;
                            break;
                        case "Legends":
                            roomPath = legendsPath;
                            break;
                        case "Leaders":
                            roomPath = leadersPath;
                            break;
                        case "Explorers":
                            roomPath = explorersPath;
                            break;
                        case "Visionaries":
                            roomPath = visionariesPath;
                            break;
                        case "Philosophers":
                            roomPath = philosophersPath;
                            break;                            
                    }
                return ( 

                
                    <Col key={room_data.id} xs={12} md={6} lg={4}>
                    
                    <a  style={{
                        textDecoration: "none"
                    }}
                        onClick={() => navigateTo(`view/${room_data.id}`,
                        { state: {room_id: room_data?.id, bookingDetails: bookingDetails}})}
                        href="">
                        
                    <RoomCard className="room-card" room={room_data.name} imagePath={roomPath} />
                        </a>
                    </Col>
        

                )})
        );
    }

    {/* Arrange rooms in two rows, each consisting of 3 columns */}
    function RoomsDisplay({rooms}) {
        return (
        rooms?.length>3?
          
            <Container>
           <Row className="mt-5">
               <DisplayRooms roomsData = {rooms.slice(0, 3)} />
           </Row>
           <Row className="mt=5">
               <DisplayRooms roomsData = {rooms.slice(3, rooms.length)}/>
           </Row>
           </Container>
           :
           <Row className="mt-5">
               <DisplayRooms roomsData = {rooms} />
           </Row>
       
    )
    }

    return (
        <>
            <Container className="mt-4" fluid>
                    <Container className="mt-4 d-flex justify-content-center" fluid>    
                    {/* Amenities ribbon */}
                    <Container className="d-flex align-items-center justify-content-center" fluid>
                        <Container style={{
                            fontSize: 20,
                            borderRight: "2px solid black",
                            textAlign: "center",
                            width: "6em"

                        }} className="mr-3" >
                                    <strong>Amenities</strong>
                        </Container>

                            <Container className="d-flex align-items-center justify-content-center">
                                <AirConditioningIcon className="mr-1" /> 
                                    <Container>Air Conditioning</Container>
                                    
                                </Container>
                                <Container className="d-flex justify-content-space-around align-items-center" >
                                    <WhiteBoardIcon className="mr-1" />
                                    <Container>Whiteboard</Container>
                                    
                                </Container>
                                <Container className="d-flex justify-content-space-around align-items-center ">
                                    <WifiIcon className="mr-1" /> 
                                    <Container>Wifi</Container>
                                    
                                </Container>
                                <Container className="d-flex justify-content-space-around align-items-center">
                                    <TVIcon className="mr-1" /> 
                                    <Container>TV</Container>  
                                </Container>
                                
                                <Container className="d-flex justify-content-space-around align-items-center">
                                    <SpeakerIcon className="mr-1" /> 
                                        <Container>Sound System</Container>
                                    </Container>
                            
                                <AllAmenitiesModalHome/>      
                    </Container>
                    {/* Filter rooms ribbon */}
                </Container >
                <Container className="d-flex align-items-center justify-content-center">
                        <FilterRoomsNew handleRooms={handleRooms} />
                </Container>
                
                <Container>

                    {/* "See avaiable rooms" Title */}
                <Container className="d-flex align-items-center mt-3 justify-content-center" fluid>
                        <Container  
                            className=" mt-2 "
                            style={{
                                borderBottom: "2px solid #DDDD"
                            }}
                        >
                       <h1> {validRooms.length?"Click a room below to reserve":"See all rooms"}</h1> 
                    </Container>
                </Container >
                    {/* Display rooms. Refresh page with updated rooms when users enters booking details */}
                <RoomsDisplay sx={{
                }} rooms={validRooms.length?validRooms:rooms}/>
                                    
                </Container>
            </Container>
            
        </>
    )
}