import React, { useState, useEffect } from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListSubheader from '@mui/material/ListSubheader';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';

import moment from 'moment';
import {unpack_api_result, get_gamenight, patch_gamenight} from '../api/Api';

function Gamenight(props) {

  const [dense, setDense] = useState(true);
  const [gamenight, setGamenight] = useState(null);

  const fetchGamenight = () => {
    if (props.user !== null) {
      unpack_api_result(get_gamenight(props.gamenightId, props.user.jwt), props.setFlash)
        .then(result => setGamenight(result.gamenight));
    }
  }

  useEffect(fetchGamenight, []);

  let games = gamenight?.game_list.map(g =>
    (
      <ListItem>
        <ListItemText
          primary={g.name}
        />
      </ListItem>
    )
  );

  const participants = gamenight?.participants.map(p =>
    (
      <ListItem>
        <ListItemText
          primary={p.username}
        />
      </ListItem>
    )
  );

  const Join = () => {
    const input = {
      action: 'AddParticipant'
    };
    
    unpack_api_result(patch_gamenight(gamenight.id, input, props.user.jwt), props.setFlash)
      .then(() => fetchGamenight());
  };

  const Leave = () => {
    const input = {
      action: 'RemoveParticipant',
    };

    unpack_api_result(patch_gamenight(gamenight.id, input, props.user.jwt), props.setFlash)
      .then(() => fetchGamenight());
  };

  let join_or_leave_button;
  if(gamenight?.participants.find(p => p.id === props.user.id) === undefined) {
    join_or_leave_button = (
      <Button 
        variant="outlined"
        color="success"
        onClick={Join}>
        Join
      </Button>
    )
  } else {
    join_or_leave_button = (
      <Button 
        variant="outlined"
        color="error"
        onClick={Leave}>
        Leave
      </Button>
    )
  }

  return (
    <div>
      <IconButton  
        aria-label="back"
        onClick={(e) => props.onDismis()}>
        <ArrowBackIcon />
      </IconButton>

      <Typography type="h3">
        {gamenight?.name}
      </Typography>
      <Typography type="body1">
        When: {moment(gamenight?.datetime).format('LL HH:mm')}
      </Typography>

      <List 
        dense={dense}
        aria-labelledby="games-subheader"
        subheader={
          <ListSubheader component="div" id="games-subheader">
            Games:
          </ListSubheader>
        }>
        {games}
      </List>
      <List 
        dense={dense}
        aria-labelledby="participants-subheader"
        subheader={
          <ListSubheader component="div" id="participants-subheader">
            Participants:
          </ListSubheader>
        }>
        {participants}
      </List>
      {join_or_leave_button}
    </div>
  )
}

export default Gamenight