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';
import {delete_gamenight, unpack_api_result} from '../api/Api';

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

  const DeleteGamenight = (game_id) => {
    if (props.user !== null) {
      const input = { game_id: game_id };
      unpack_api_result(delete_gamenight(input, props.user.jwt), props.setFlash)
        .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