import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import PokemonList from './pokemon-list';
import WantGroup from './want-group';

function getModalStyle() {
  const top = 50;
  const left = 50;

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

const useStyles = makeStyles(theme => ({
  paper: {
    position: 'absolute',
    width: '80%',
    height: '90%',
    backgroundColor: theme.palette.background.paper,
    border: '2px solid #000',
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
    overflow: 'scroll',
  },
}));

export default function ConnectModal(props) {
  const classes = useStyles();
  // getModalStyle is not a pure function, we roll the style only on the first render
  const [modalStyle] = React.useState(getModalStyle);

  const {
    pokemonWantList, onDeselectPokemon, open, handleLinkWantAndNeed, linked, selectedId,
  } = props;

  const body = (
    <div style={modalStyle} className={classes.paper}>
      {
        pokemonWantList.map(wantGroup => (
          <WantGroup
            handleLinkWantAndNeed={handleLinkWantAndNeed}
            pokemonList={wantGroup.pokemons}
            groupId={wantGroup.id}
            groupName={wantGroup.group_name}
            linked={linked}
            selectedId={selectedId}
            connect
          />
        ))
      }
    </div>
  );

  return (
    <div>
      <Modal
        open={open}
        onClose={onDeselectPokemon}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
        {body}
      </Modal>
    </div>
  );
}