import * as React from 'react';

import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import Divider from '@mui/material/Divider';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import TextField from '@mui/material/TextField';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

import { ThemeProvider, createTheme } from '@mui/material/styles';

import './App.css'

import Map from './Map.js';
import Rooms from './Rooms.js';

function ChangeFloor({ currentFloor, callbackFloorChanged }) {
  const handleFloorChanged = (event) => {
    callbackFloorChanged(event.target.value);
  };

  return <>
    <div style={{ padding: '24px' }}>
      <Typography component="h2" variant="h5" gutterBottom>
        Changer d'étage
      </Typography>

      <Select
        id="demo-simple-select"
        value={currentFloor}
        label="Étage"
        onChange={handleFloorChanged}
        fullWidth
      >
        <MenuItem value={1}>Monod - Premier étage</MenuItem>
        <MenuItem value={6}>Monod - Troisième étage</MenuItem>
        <MenuItem value={7}>Monod - Quatrième étage</MenuItem>
      </Select>
    </div>
  </>
}

function RoomResearch({ callbackRoomSelected }) {
  const [currentRequest, setCurrentRequest] = React.useState("");
  const [rooms, setRooms] = React.useState([]);

  const startResearch = (event) => {
    fetch("https://encartes.aliens-lyon.fr/api/map/find_place_by_name/" + currentRequest)
      .then(response => response.json())
      .then(data => {
        setRooms(data);
      });
  };

  return <>
    <div style={{ padding: '24px' }}>
      <Typography component="h2" variant="h5" gutterBottom>
        Rechercher une salle
      </Typography>
      <TextField
        label="Nom, code, occupants, ..."
        value={currentRequest}
        onChange={(event) => { setCurrentRequest(event.target.value) }}
        variant="outlined"
        fullWidth
      />
      <Box
        marginTop={1}
        display="flex"
        justifyContent="flex-end"
        alignItems="flex-end"
      >
        <Button variant="contained" onClick={startResearch}>Rechercher</Button>
      </Box>
      <Rooms rooms={rooms} callbackRoomSelected={callbackRoomSelected} />
    </div>
  </>
}

function RoomInformation({ roomId }) {
  const [names, setNames] = React.useState([]);
  const [users, setUsers] = React.useState([]);

  React.useEffect(() => {
    fetch("https://encartes.aliens-lyon.fr/api/map/show_place_info/" + roomId)
      .then(response => response.json())
      .then(data => {
        setNames(data['names']);
        setUsers(data['users']);
      })
      .catch(error => {
        // TODO: error tooltip
      });
  }, [roomId]);

  return <div style={{ padding: '24px' }}>
      <Typography component="h2" variant="h5" gutterBottom>
        Salle sélectionnée
      </Typography>
      <ul>
        <li>{
          names.length == 0 ? <em>Aucun nom défini</em> : names.join(', ')
        }</li>
        <li>{
          users.length == 0
            ? <em>Aucun utilisateur défini</em>
            : 'Utilisée par ' + users.join(', ')
        }</li>
      </ul>
    </div>
}

function TopBar() {
  const [openAboutModal, setOpenAboutModal] = React.useState(false);

  const handleOpenAboutModal = () => {
    setOpenAboutModal(true);
  };

  const handleCloseAboutModal = () => {
    setOpenAboutModal(false);
  };

  return <>
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          ENcarteS
        </Typography>
        <Button color="inherit" onClick={handleOpenAboutModal}>À propos</Button>
      </Toolbar>
    </AppBar>

    <Dialog
      open={openAboutModal}
      onClose={handleCloseAboutModal}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">
        {"À propos d'ENcarteS"}
      </DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          ENcarteS permet de rechercher les salles de l'ENS !
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleCloseAboutModal}>Ok</Button>
      </DialogActions>
    </Dialog>
  </>
}


export default function App() {
  const [currentFloor, setCurrentFloor] = React.useState(6);
  const [selectedRoom, setSelectedRoom] = React.useState(null);

  return <>
    <TopBar />
    <div style={{ flexGrow: '1', display: 'flex', flexDirection: 'line', flexWrap: 'nowrap' }}>
      <Map callbackRoomSelected={setSelectedRoom} selectedRoom={selectedRoom} floorID={currentFloor} callbackChangeFloor={setCurrentFloor} />
      <div>
        <ChangeFloor currentFloor={currentFloor} callbackFloorChanged={setCurrentFloor} />
        <Divider />
        <RoomResearch callbackRoomSelected={(floor, room) => {
          setCurrentFloor(floor);
          setSelectedRoom(room);
        }} />
        <Divider />
        <RoomInformation roomId={selectedRoom} />
      </div>
    </div>
  </>
}

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
});

function ThemedApp() {
  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  );
}