text: import React, {useState, useEffect} from 'react'
  import ReactMapGL, {Marker, FlyToInterpolator, NavigationControl, LinearInterpolator} from 'react-map-gl'
  import {Form, Button, Modal, OverlayTrigger, Tooltip, Dropdown, DropdownButton} from 'react-bootstrap'
  import MarkerImg from './markerImgAdvisor'
  import Team from '../../svg/team.svg'
  import Management from '../../svg/management.svg'
  import Customer from '../../svg/customer.svg'
  import Wage from '../../svg/wage.svg'
  import Divider from '@material-ui/core/Divider'
  import Arrow from '../../svg/arrowDown.svg'
  import ToggleDisplay from 'react-toggle-display'
  import Close from '../../svg/close.svg'
  import Rating from '@material-ui/lab/Rating'
  import Typography from '@material-ui/core/Typography'
  import Box from '@material-ui/core/Box'
  import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAltOutlined'
  import DepartementDetails from '../../../hotels/departementDetailsSheet/ile_de_france.json'
  import { paris_arrondissement, ile_de_france, auvergne_rhone_alpes, bourgogne_franche_comte, bretagne, centre_val_de_loire, corse, grand_est, hauts_de_france, normandie, nouvelle_aquitaine, occitanie, pays_de_la_loire,provence_alpes_cote_d_azur } from "../../../hotels"
  import RegionDetails from '../../../hotels/regionDetailsSheet.json'
  import HotelRegistrator from './hotelRegitrator'
  import moment from 'moment'
  import { navigate } from 'gatsby'
  import Home from '../../svg/home.svg'
  import Dialog from './common/fullScreenDialog'
  import Filter from '../../svg/filter.svg'
  
  
  export default function DeepMap2({user, firebase}) {
  
      const [info, setInfo] = useState([])
      const [ratingData, setRatingData] = useState([])
      const [commentData, setCommentData] = useState([])
      const [hotelRef, setHotelRef] = useState(null)
      const [selectedHotel, setselectedHotel] = useState(null)
      const [list, setList] = useState(false)
      const [region, setRegion] = useState("Région")
      const [initialFilter, setInitialFilter] = useState("region")
      const [operator, setOperator] = useState("==")
      const [departement, setDepartement] = useState("Département")
      const [filter, setFilter] = useState(region)
      const [show, setShow] = useState(false)
      const [details, setDetails] = useState(false)
      const [comment, setComment] = useState(false)
      const [number, setNumber] = useState(0)
      const [zoom, setZoom] = useState(5)
      const [scrollZoom, setScrollZoom] = useState(true)
      const [showDialog, setShowDialog] = useState(false)
  
      const [formValue, setformValue] = useState({commentTitle: "", status: "", bestOf: "", bullShift: "", team: 0, management: 0, customer: 0, wage: 0})
  
      const deptDetails = [paris_arrondissement, ile_de_france, auvergne_rhone_alpes, bourgogne_franche_comte, bretagne, centre_val_de_loire, corse, grand_est, hauts_de_france, normandie, nouvelle_aquitaine, occitanie, pays_de_la_loire,provence_alpes_cote_d_azur]
  
  
      const handleChange = (event) =>{
          event.persist()
          setformValue(currentValue =>({
            ...currentValue,
            [event.target.name]: event.target.value
          }))
        }
  
        const handleShowDetails = () =>{
            let arrowTop = document.getElementById("arrowTop")
          if(arrowTop.style.transform === "rotate(0turn)"){
              setShow(!show)
              return arrowTop.style.transform = "rotate(0.5turn)"
          }
          if(arrowTop.style.transform === "rotate(0.5turn)"){
              setShow(!show)
              return arrowTop.style.transform = "rotate(0turn)"
          }
          
      }  
  
      const handleShowComment = () =>{
          let arrowBottom = document.getElementById("arrowBottom")
          if(arrowBottom.style.transform === "rotate(0turn)"){
              setComment(!comment)
              return arrowBottom.style.transform = "rotate(0.5turn)"
          }
          if(arrowBottom.style.transform === "rotate(0.5turn)"){
              setComment(!comment)
              return arrowBottom.style.transform = "rotate(0turn)"
          }
      }  
  
      const handleShowWindowDetails = () =>{
          setDetails(false)
      }
  
      const handleClose = () => setList(false)
      const handleShow = () => setList(true)
  
      const hideDialog = () => {
          setShowDialog(false)
      }
  
      const [viewPort, setviewPort] = useState({
          latitude: 47.2850,
          longitude: 1.4107,
          width: "96%",
          height: "80%",
          zoom: zoom
      })
  
      const handleRegion = (newRegion, lat, lng, zoom) => {
          
          setRegion(newRegion)
          setviewPort({
              latitude: lat,
              longitude: lng,
              width: "96%",
              height: "80%",
              zoom: zoom,
              transitionDuration: 500,
              transitionInterpolator: new FlyToInterpolator(),
              transitionEasing: t => t * (2 - t)
          })
      }
  
      const handleDepartement = (departement, lat, lng, zoom) => {
          
          setDepartement(departement)
          setviewPort({
              latitude: lat,
              longitude: lng,
              width: "96%",
              height: "80%",
              zoom: zoom,
              transitionDuration: 500,
              transitionInterpolator: new FlyToInterpolator(),
              transitionEasing: t => t * (2 - t)
          })
      }
  
      const handleStars = (classement) => {
          setInitialFilter("classement")
          setOperator("in")
          setFilter([classement, "Toutes les étoiles"])
      }
      
      const getLocation = () => {
          if(navigator.geolocation){
              navigator.geolocation.getCurrentPosition(function(position){
                  setviewPort({
                      latitude: position.coords.latitude,
                      longitude: position.coords.longitude,
                      width: "65%",
                      height: "100%",
                      zoom: zoom
                  })
              })
          }else{
              alert("Geolocation is not supported by this browser")
          }
      }
  
      useEffect(() => {
          const abortController = new AbortController()
          const signal = abortController.signal
          
          firebase.hotelDataOnAir({region: region, departement: departement, initialFilter: initialFilter, operator: o filter: filter, signal : signal}).onSnapshot(function(snapshot) {
                      const snapInfo = []
                    snapshot.forEach(function(doc) {          
                      snapInfo.push({
                          id: doc.id,
                          ...doc.data()
                        })        
                      });
                      console.log(snapInfo)
                      setInfo(snapInfo)
                  });
  
                  return () => {
                      abortController.abort()
                      }
       },[region, departement, filter, initialFilter])
  
       useEffect(() => {
          const abortController = new AbortController()
          const signal = abortController.signal    
  
          firebase.hotelRatingDataOnAir({region: region, departement: departement, hotelId: hotelRef, signal : signal}).onSnapshot(function(snapshot) {
              const snapInfo = []
            snapshot.forEach(function(doc) {          
              snapInfo.push({
                  id: doc.id,
                  ...doc.data()
                })        
              });
              console.log(snapInfo)
              setRatingData(snapInfo)
          });
        
                  return () => {
                      abortController.abort()
                      }
       },[region, departement, hotelRef])
  
       useEffect(() => {
          const abortController = new AbortController()
          const signal = abortController.signal    
  
          firebase.hotelCommentDataOnAir({region: region, departement: departement, hotelId: hotelRef, signal : signal}).onSnapshot(function(snapshot) {
              const snapInfo = []
            snapshot.forEach(function(doc) {          
              snapInfo.push({
                  id: doc.id,
                  ...doc.data()
                })        
              });
              console.log(snapInfo)
              setCommentData(snapInfo)
          });
        
                  return () => {
                      abortController.abort()
                      }
       },[region, departement, hotelRef])
  
       var flat = require('array.prototype.flat');
  
       console.log(info)
       
  
       const teamRate = ratingData.map(rate => rate.team)
       const managementRate = ratingData.map(rate => rate.management)
       const customerRate = ratingData.map(rate => rate.customer)
       const wageRate = ratingData.map(rate => rate.wage)
       const globalRate = flat([teamRate, managementRate, customerRate, wageRate])
  
       const reducer = (accumulator, currentValue) => accumulator + currentValue;
  
       console.log(flat([teamRate, managementRate, customerRate, wageRate]))
  
      return (
          <div
          style={{
          display: "flex",
          height: "100vh",
          width: "100vw",
          flexFlow: "row",
          overflow: "hidden"}}
          className="boomSkakalaka">
              <ReactMapGL 
              mapboxApiAccessToken={"pk.eyJ1IjoiZGFkZG91MTk4NSIsImEiOiJja2hqbW55NzAxY2hjMnltY3E3NGFvc3VwIn0.2_N4X7hpHuVXErwXFTGBRA"}
              mapStyle="mapbox://styles/daddou1985/ckhjmqdia4iqa19qcjpu4darh"
              onViewportChange={viewPort => {
                  setviewPort(viewPort)
              }}
              {...viewPort}
              scrollZoom={scrollZoom}
              style={{marginTop: "4vh", marginLeft: "2vw", borderRadius: "10px"}}
              >
                  {info.map((hotel, key) =>(
                      <Marker 
                      key={key}
                      latitude={hotel.lat} 
                      longitude={hotel.lng}
                      > 
                       <OverlayTrigger
                          onEnter={() => setHotelRef(hotel.id)}
                          placement="top"
                          overlay={
                          <Tooltip id="title" className="popup-hotel-info">
                              <h5 style={{padding: "5%"}}>{hotel.hotelName}</h5>
                                  {ratingData.length > 0 ?
                                      <Box component="fieldset" mb={3} borderColor="transparent">
                                  <Typography component="legend"></Typography>
                                  <Rating
                                  name="management"
                                  value={globalRate.reduce(reducer)/globalRate.length}
                                  precision={0.5}
                                  icon={<SentimentSatisfiedAltIcon fontSize="inherit" />}
                                  readOnly
                                  style={{color: "green"}}
                                  />
                              </Box> : <p style={{fontSize: "15px"}}>Soyez le premier à noter cet hôtel</p>}
                              
                          </Tooltip>
  
                          }>
                              <button style={{background: "none", border: "none", outline: "none"}}
                              onClick={(event) => {
                                      event.preventDefault()
                                      setselectedHotel(hotel)
                                      setDetails(true) 
                                      setHotelRef(hotel.id)
                                      setScrollZoom(false)
                                  }}>
                                  <MarkerImg />
                              </button>
                       </OverlayTrigger>
                      </Marker>
                              ))}
                  
                  {selectedHotel ? (
                      <>
                          <ToggleDisplay show={details}>
                              <div className="toggleDisplay-global-container">
                                  <div className="toggleDisplay-relative-container"
                                      defaultChecked={details}>
                                  <div className="toggleDisplay-header-container">
                                      <div className="toggleDisplay-header-text">
                                          <h3>{selectedHotel.hotelName} 
                                              <div className="toggleDisplay-header-rating-box">
                                              {ratingData.length > 0 ?
                                                  <Box component="fieldset" mb={3} borderColor="transparent">
                                                      <Typography component="legend"></Typography>
                                                          <Rating
                                                          name="management"
                                                          value={globalRate.reduce(reducer)/globalRate.length}
                                                          precision={0.5}
                                                          icon={<SentimentSatisfiedAltIcon fontSize="inherit" />}
                                                          readOnly
                                                          style={{color: "green"}}
                                                          />
                                                  </Box> :  <p style={{fontSize: "15px"}}>Soyez le premier à noter cet hôtel</p>}
                                              </div>
                                          </h3>
                                          <span>Etablissement {selectedHotel.classement[0]}<img src={Arrow} alt="arrow" style={{width: "15px", cursor: "pointer", marginLeft: "2vw", transform: "rotate(0turn)"}} id="arrowTop" onClick={handleShowDetails} /></span>
                                      </div>
                                      <img src={Close}  alt="" className="toggleDisplay-header-close-button" onClick={() => {
                                          setCommentData([])
                                          handleShowWindowDetails()
                                          setScrollZoom(true)}}
                                           />
                                  </div>
                              <ToggleDisplay show={show}>
                                      <div className="toggleDisplay-header-details"
                                          defaultChecked={show}>
                                  <Divider style={{height: "1vh", marginBottom: "5vh"}} />
                                          <span><b style={{color: "gray"}}>Adresse: </b> {selectedHotel.adresse}, {selectedHotel.code_postal} {selectedHotel.city}</span>
                                          <span><b style={{color: "gray"}}>Nombre de chambres: </b> {selectedHotel.room}</span> 
                                          <span><b style={{color: "gray"}}>Téléphone: </b>{selectedHotel.phone}</span> 
                                          <span><b style={{color: "gray"}}>Courriel: </b>{selectedHotel.mail}</span>
                                          <span><b style={{color: "gray"}}>Portail web: </b>{selectedHotel.website}</span>
                                      </div>
                              </ToggleDisplay>
                                  <Divider style={{height: "1vh", marginBottom: "5vh"}} />
                                  
                                      <div className="toggleDisplay-body-container">
                                      <h3>Statistiques de l'établissement</h3>
                                      <div className="toggleDisplay-body-stats-container">
                                          <div className="toggleDisplay-body-stats-box">
                                              <h5>Team</h5>
                                              <img src={Team} alt="" style={{width: "30%", borderRadius: "25px", marginBottom: "2vh"}} />
                                              <p style={{ontSize: "1em"}}>{teamRate.length > 0 ? <Box component="fieldset" mb={3} borderColor="transparent">
                                                      <Typography component="legend"></Typography>
                                                      <Rating
                                                      name="team"
                                                      value={teamRate.reduce(reducer)/teamRate.length}
                                                      onChange={handleChange}
                                                      precision={0.5}
                                                      readOnly/>
                                                  </Box> : "Aucune Note"}</p>
                                          </div>
                                          <div className="toggleDisplay-body-stats-box">
                                              <h5>Management</h5>
                                              <img src={Management} alt="" style={{width: "30%", borderRadius: "25px", marginBottom: "2vh"}} />
                                              <p style={{fontSize: "1em"}}>{managementRate.length > 0 ? <Box component="fieldset" mb={3} borderColor="transparent">
                                              <Typography component="legend"></Typography>
                                                      <Rating
                                                      name="team"
                                                      value={managementRate.reduce(reducer)/managementRate.length}
                                                      onChange={handleChange}
                                                      precision={0.5}
                                                      readOnly/>
                                                  </Box> : "Aucune Note"}</p>
                                          </div>
                                          <div className="toggleDisplay-body-stats-box">
                                              <h5>Clientèle</h5>
                                              <img src={Customer} alt="" style={{width: "30%", borderRadius: "25px", marginBottom: "2vh"}} />
                                              <p style={{fontSize: "1em"}}>{customerRate.length > 0 ? <Box component="fieldset" mb={3} borderColor="transparent">
                                              <Typography component="legend"></Typography>
                                                      <Rating
                                                      name="team"
                                                      value={customerRate.reduce(reducer)/customerRate.length}
                                                      onChange={handleChange}
                                                      precision={0.5}
                                                      readOnly/>
                                                  </Box> : "Aucune Note"}</p>
                                          </div>
                                          <div className="toggleDisplay-body-stats-box">
                                              <h5>Avantages</h5>
                                              <img src={Wage} alt="" style={{width: "30%", borderRadius: "25px", marginBottom: "2vh"}} />
                                              <p style={{fontSize: "1em"}}>{wageRate.length > 0 ? <Box component="fieldset" mb={3} borderColor="transparent">
                                              <Typography component="legend"></Typography>
                                                      <Rating
                                                      name="team"
                                                      value={wageRate.reduce(reducer)/wageRate.length }
                                                      onChange={handleChange}
                                                      precision={0.5}
                                                      readOnly/>
                                                  </Box>: "Aucune Note"}</p>
                                          </div>
                                      </div>
                                  </div>                                
                                  
                                  <div style={{display: "flex", flexFlow: "column", justifyContent: "center", marginBottom: "5vh", width: "100%"}}>
                                      <Divider style={{height: "1vh", marginBottom: "5vh"}} />
                                      <div style={{
                                          display: "flex",
                                          flexFlow: "row",
                                          justifyContent: "space-between",
                                          alignItems: "center"}}>
                                          <Button size="lg" style={{width: "78%"}} variant="secondary" onClick={handleShow}>Noter cet hôtel</Button>
                                          <span>
                                             {commentData.length} avis
                                              <img src={Arrow} alt="arrow" style={{width: "15px", cursor: "pointer", marginLeft: "2vw", transform: "rotate(0turn)"}} id="arrowBottom" onClick={handleShowComment} />
                                          </span>
                                      </div>
                                  </div>
                                  <ToggleDisplay show={comment}>
                                      {commentData && commentData.map(commentData => (
                                          <div style={{
                                              display: "flex",
                                              flexFlow: "column",
                                              padding: "5%", 
                                              backgroundColor: "rgb(230, 232, 237)",
                                              borderRadius: "15px",
                                              marginBottom: "5vh",
                                          }}
                                          defaultChecked={comment}>
                                          <div>
                                              <h4>{commentData.commentTitle}</h4>
                                              <p>{commentData.status}</p>
                                          </div>
                                          <Divider style={{marginBottom: "2vh"}} />
                                          <div>
                                              <h6>Le Best Of</h6>
                                              <p>{commentData.bestOf}</p>
                                          </div>
                                          <div>
                                              <h6>Les BullShift</h6>
                                              <p>{commentData.bullShift}</p>
                                          </div>
                                          <div style={{textAlign: "right"}}>{moment(commentData.markup).fromNow()}</div>
                                      </div>
                                      ))}
                                  </ToggleDisplay>
                              </div>
                              </div>
                              
                          </ToggleDisplay>
                              
                              
                              <Modal show={list}
                                  size="lg"
                                  aria-labelledby="contained-modal-title-vcenter"
                                  tpp
                                  onHide={handleClose}>
                                  <Modal.Header closeButton className="bg-light">
                                      <Modal.Title id="contained-modal-title-vcenter" style={{textAlign: "center"}}>
                                      {selectedHotel.hotelName}
                                      </Modal.Title>
                                  </Modal.Header>
                                  <Modal.Body style={{height: "65vh", overflow: "auto"}}>
                                  <div style={{textAlign: "center"}}><h4 style={{marginTop: "2vh"}}>Faites-nous part de votre expérience</h4></div>
                                  <div id="overbookingForm" style={{
                                      display: "flex",
                                      flexFlow: "row wrap",
                                      width: "100%",
                                      justifyContent: "space-around",
                                      alignItems: "flex-start",
                                      padding: "2%", 
                                      }}>
                                          <div>
                                              <Form.Row style={{width: "25%"}}>
                                                  <Form.Group controlId="description">
                                                  <Form.Label>Teamwork</Form.Label>
                                                  <Box component="fieldset" mb={3} borderColor="transparent">
                                                      <Typography component="legend"></Typography>
                                                      <Rating
                                                      name="team"
                                                      value={formValue.team}
                                                      onChange={handleChange}
                                                      />
                                                  </Box>
                                              </Form.Group>
                                              </Form.Row>
                                              <Form.Row style={{width: "25%"}}>
                                                  <Form.Group controlId="description">
                                                  <Form.Label>Management</Form.Label>
                                                  <Box component="fieldset" mb={3} borderColor="transparent">
                                                      <Typography component="legend"></Typography>
                                                      <Rating
                                                      name="management"
                                                      value={formValue.management}
                                                      onChange={handleChange}
                                                      />
                                                  </Box>                                        
                                              </Form.Group>
                                              </Form.Row>
                                              <Form.Row style={{width: "25%"}}>
                                                  <Form.Group controlId="description">
                                                  <Form.Label>Clientèle</Form.Label>
                                                  <Box component="fieldset" mb={3} borderColor="transparent">
                                                      <Typography component="legend"></Typography>
                                                      <Rating
                                                      name="customer"
                                                      value={formValue.customer}
                                                      onChange={handleChange}
                                                      />
                                                  </Box>                                            
                                              </Form.Group>
                                              </Form.Row>
                                              <Form.Row style={{width: "25%"}}>
                                                  <Form.Group controlId="description">
                                                  <Form.Label>Avantages</Form.Label>
                                                  <Box component="fieldset" mb={3} borderColor="transparent">
                                                      <Typography component="legend"></Typography>
                                                      <Rating
                                                      name="wage"
                                                      value={formValue.wage}
                                                      onChange={handleChange}
                                                      />
                                                  </Box>                                            
                                              </Form.Group>
                                              </Form.Row>
                                          </div>
                                          <div>
                                              <Form.Row>
                                                  <Form.Group controlId="description" style={{width: "100%"}}>
                                                      <Form.Label>Résumez votre expérience en une phrase</Form.Label>
                                                      <Form.Control type="text" size="sm" style={{width: "100%"}} value={formValue.commentTitle} name="commentTitle" onChange={handleChange} />
                                                  </Form.Group>
                                              </Form.Row>
                                              <Form.Row>
                                                  <Form.Group controlId="exampleForm.SelectCustom" style={{width: "100%"}}>
                                                      <Form.Label>Quel est votre statut actuel vis-à-vis de l'établissement ?</Form.Label><br/>
                                                      <select class="selectpicker" value={formValue.status} name="status" onChange={handleChange} 
                                                      style={{width: "100%", 
                                                      height: "5vh", 
                                                      border: "1px solid lightgrey", 
                                                      borderRadius: "3px",
                                                      backgroundColor: "white"}}>
                                                          <option></option>
                                                          <option>employé actuel</option>
                                                          <option>ancien employé</option>
                                                      </select>
                                                  </Form.Group>
                                              </Form.Row>
                                              <Form.Row>
                                                  <Form.Group controlId="description" style={{width: "100%"}}>
                                                      <Form.Label>Faites-nous un <i>Best of</i> des meilleurs moments</Form.Label>
                                                      <Form.Control as="textarea" type="text" size="sm" style={{width: "100%", resize: "none"}} value={formValue.bestOf} name="bestOf" onChange={handleChange} />
                                                  </Form.Group>
                                              </Form.Row>
                                              <Form.Row>
                                                  <Form.Group controlId="description" style={{width: "100%"}}>
                                                      <Form.Label>Faites-nous un <i>Best of</i> des moments <i>BullShift</i></Form.Label>
                                                      <Form.Control as="textarea" type="text" size="sm" style={{width: "100%", resize: "none"}} value={formValue.bullShift} name="bullShift" onChange={handleChange} />
                                                  </Form.Group>
                                              </Form.Row>
                                          </div>
                                      </div>
                                  </Modal.Body>
                                  <Modal.Footer>
                                  <Button variant="success" 
                                  style={{width: "20%"}} 
                                  onClick={(event) => {
                                      event.preventDefault()
                                      setformValue({commentTitle: "", status: "", bestOf: "", bullShift: "", team: 0, management: 0, customer: 0, wage: 0})
                                      setselectedHotel(null)
                                      firebase.addCommentOnHotel({
                                          hotelId: selectedHotel.id, 
                                          region: region === "PARIS" ? selectedHotel.departement : selectedHotel.region,
                                          departement: region === "PARIS" ? selectedHotel.code_postal : selectedHotel.departement,
                                          commentTitle: formValue.commentTitle,
                                          status: formValue.status,
                                          bestOf: formValue.bestOf,
                                          bullShift: formValue.bullShift,
                                          team: parseInt(formValue.team),
                                          management: parseInt(formValue.management),
                                          customer: parseInt(formValue.customer),
                                          wage: parseInt(formValue.wage)})
                                      .then(handleClose)
                                  }}>Envoyer</Button>
                                  </Modal.Footer>
                              </Modal> 
                              
                              </>) : null}
                              
                              
                              
                              {details ? <></> :
                                  <div className="filter-global-container">
                                  <h3 style={{textAlign: "center"}}><b>Shift Advisor</b></h3>
                                  <Divider style={{height: "1vh"}} />
                                  
                                  <h6><b>Filtrer les hôtels par :</b></h6>
                                  <div className="filter-button-container">
                                  <Form.Row>
                                  <Form.Group style={{
                                      display: "flex",
                                      flexFlow: "column",
                                      alignItems: "center"
                                  }}>
                                  <DropdownButton id="dropdown-basic-button" title={region} drop="right">
                                  {RegionDetails.map(details => (
                                      <Dropdown.Item  onClick={()=>{
                                          console.log(details.view)
                                          setZoom(details.view)
                                          setNumber(details.number)
                                          handleRegion(details.region, details.coordinates[0], details.coordinates[1], details.view)}}>{details.region}</Dropdown.Item>
                                      ))}
                                  </DropdownButton>
                                  </Form.Group>
                                  </Form.Row>
                                  <Form.Row>
                                  <Form.Group style={{
                                      display: "flex",
                                      flexFlow: "column",
                                      alignItems: "center"
                                  }}>
                                  
                                  {region !== "Région" ? <DropdownButton id="dropdown-basic-button" title={departement} variant='info'  drop="right">
                                      
                                  {region === "PARIS" ? deptDetails[number].map(details => (
                                      <Dropdown.Item  onClick={()=>{
                                          console.log(details.view)
                                          setZoom(details.view)
                                          setInitialFilter("code_postal")
                                          setFilter(details.nom)
                                          handleDepartement(details.nom, details.coordinates[0], details.coordinates[1], details.view)}}>{details.nom}</Dropdown.Item>
                                      )) : deptDetails[number].map(details => (
                                          <Dropdown.Item  onClick={()=>{
                                              console.log(details.view)
                                              setZoom(details.view)
                                              setInitialFilter("departement")
                                              setFilter(details.nom)
                                              handleDepartement(details.nom, details.coordinates[0], details.coordinates[1], details.view)}}>{details.nom}</Dropdown.Item>
                                          ))}
                                  </DropdownButton> 
                                  :
                                  <></>}
                                  </Form.Group>
                                      </Form.Row>
                                      <Form.Row>
                                      <Form.Group style={{
                                      display: "flex",
                                      flexFlow: "column",
                                      alignItems: "center"
                                  }}>
                                  {departement !== "Département" ? <DropdownButton id="dropdown-basic-button" title={initialFilter === "classement" ? filter[0] : "Classement"} variant='warning' drop="right">
                                      <Dropdown.Item onClick={()=>{handleStars("1 étoile")}}>1 étoile</Dropdown.Item>
                                      <Dropdown.Item onClick={()=>{handleStars("2 étoiles")}}>2 étoiles</Dropdown.Item>
                                      <Dropdown.Item onClick={()=>{handleStars("3 étoiles")}}>3 étoiles</Dropdown.Item>
                                      <Dropdown.Item onClick={()=>{handleStars("4 étoiles")}}>4 étoiles</Dropdown.Item>
                                      <Dropdown.Item onClick={()=>{handleStars("5 étoiles")}}>5 étoiles</Dropdown.Item>
                                      <Dropdown.Item onClick={()=>{handleStars("")}}>Retirer le filtre</Dropdown.Item>
                                  </DropdownButton>
                                  :
                                  <></>}
                                  </Form.Group>
                                  </Form.Row>
                                  </div>
                              </div>}
                          <div style={{position: 'absolute', right: 0}}>
                              <NavigationControl />
                      </div>
              </ReactMapGL>
              <img src={Home} alt="home page" className="home-icon" onClick={() => navigate("/izilife")} />
              {!!firebase &&
              <HotelRegistrator firebase={firebase} />}
          </div>
      )
  }
  
  