import * as React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemText from '@mui/material/ListItemText';
import Avatar from '@mui/material/Avatar';
import IconButton from '@mui/material/IconButton';
import GamesIcon from '@mui/icons-material/Games';
import DeleteIcon from '@mui/icons-material/Delete';

import AddGameNight from './AddGameNight';

function Gamenights(props) {
  const [dense, setDense] = React.useState(false);

  const DeleteGamenight = (gameId) => {
    if (props.user !== null) {
      let input = {
        game_id: gameId,
      }
  
      const requestOptions = {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${props.user.jwt}`
        },
        body: JSON.stringify(input)
      };
  
      fetch('api/gamenights', requestOptions)
        .then(response => response.json())
        .then(data => {
          if(data.result !== "Ok") {
            props.setFlash({
              type: "Error",
              message: data.message
            });
          }
        })
        .then(() => props.refetchGamenights());
    }
  }

  let gamenights = props.gamenights.map(g => {
    let secondaryAction;
    if(props.user.id === g.owner_id || props.user.role === 'Admin') {
      secondaryAction = (
        <IconButton 
          edge="end" 
          aria-label="delete"
          color="error"
          onClick={(e) => {
            e.stopPropagation();
            DeleteGamenight(g.id)
          }}>
          <DeleteIcon />
        </IconButton>
      )
    }
    return (
      <ListItem
        component="nav"
        onClick={(e) => props.onSelectGamenight(g)}
        secondaryAction={
          secondaryAction
        }>
        <ListItemAvatar>
          <Avatar>
            <GamesIcon />
          </Avatar>
        </ListItemAvatar>
        <ListItemText
          primary={g.name}
        />
      </ListItem>
    )
  });

  return (
    <>
      <AddGameNight 
        user={props.user}
        games={props.games}
        setFlash={props.setFlash}
        refetchGamenights={props.refetchGamenights} />
      <List dense={dense}>
        {gamenights}
      </List>
    </>
  );
}

export default Gamenights