import React, { useEffect, useState } from 'react';
import AddIcon from '@mui/icons-material/Add';
import IconButton from '@mui/material/IconButton';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { DateTimePicker } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

import GameAdder from './GameAdder';
import { post_gamenight, unpack_api_result} from '../api/Api';

function AddGameNight(props) {
  const [expanded, setExpanded] = useState(false);
  const [gameName, setGameName] = useState("");
  const [date, setDate] = useState(Date.now());
  const [gameList, setGameList] = useState([]);

  const handleNameChange = (event) => {
    setGameName(event.target.value);
  };

  const onDateChange = (date) => {
    setDate(date);
  };

  const onGamesListChange = (gameList) => {
    setGameList(gameList);
  }

  useEffect(() => {
    if(!expanded) {
      setGameName("");
      setDate(null);
    }
  }, [expanded]);

  const handleAddGamenight = (event) => {
    event.preventDefault();
    if (props.user !== null) {
      let input = {
        name: gameName,
        datetime: date,
        game_list: gameList,
      }

      unpack_api_result(post_gamenight(input, props.user.jwt), props.setFlash)
        .then(result => {
          setExpanded(false);
          setGameName("");
          setDate(null);
        })
        .then(() => props.refetchGamenights())
    }
  };

  if(expanded) {
    return (
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <div className="Add-GameNight">
          <form autoComplete="off" onSubmit={e => { e.preventDefault(); }}>
            <fieldset>
              <legend>Gamenight</legend>

              <TextField 
                id="game-name"
                label="Name"
                variant="standard"
                value={gameName}
                onChange={handleNameChange}/>
              
              <DateTimePicker
                label="Gamenight date and time"
                variant="standard"
                value={date}
                onChange={onDateChange}
                inputFormat="dd-MM-yyyy HH:mm"
                renderInput={(params) => <TextField {...params} />}/> 
              
              <GameAdder games={props.games} onChange={onGamesListChange}/>

              <Stack direction="row" spacing={2}>
                <Button 
                  variant="outlined"
                  color="success"
                  onClick={handleAddGamenight}>
                  Create
                </Button>
                <Button 
                  variant="outlined"
                  color="error"
                  onClick={() => setExpanded(false)}>
                  Discard
                </Button>
              </Stack>
            </fieldset>
          </form>
        </div>
      </LocalizationProvider>        
    );
  } else {
    return (
      <IconButton  
        aria-label="add"
        color="success"
        onClick={(e) => setExpanded(true)}>
        <AddIcon />
      </IconButton>
    );
  }
}

export default AddGameNight