import React, { Component } from 'react';
import propTypes from 'prop-types';

import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  Input,
  InputLabel,
  FormHelperText,
  Grid,
} from '@material-ui/core';
import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';

export class AddGraph extends Component {
  constructor(props) {
    super(props);
    this.state = {
      render_revision: 0,
    }
  }
  
  plotname = '';
  lines = [];

  shouldComponentUpdate(nextProps, nextState) { // Limits re-renders
    return nextProps.show !== this.props.show || nextState.render_revision !== this.state.render_revision;
  }

  renderButtons = () => {
    return this.props.lines_available.map(key => {
      return <ToggleButton style={{textTransform: 'none', borderRadius: '0', minWidth: '25ch', maxHeight: '20px'}} value={key} key={key} aria-label={key}>{key}</ToggleButton>
    });
  }

  render() {
    //console.log("Rendering AddGraph");
    return (
      <Dialog
        open={this.props.show}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Add Graph</DialogTitle>
        <DialogContent>
          <Grid container spacing={2} direction="column" alignItems="center">
            <Grid item>
              <FormControl>
                <InputLabel htmlFor="plotname">Plot Name</InputLabel>
                <Input
                  id="plotname"
                  onChange={event => this.plotname = event.target.value}
                  aria-describedby="plotname-helper-text"
                  inputProps={{
                    'aria-label': 'Plot Name',
                  }}
                />
                <FormHelperText id="plotname-helper-text">Can be left empty</FormHelperText>
              </FormControl>
            </Grid>
            <Grid item>
            <ToggleButtonGroup orientation="vertical" value={this.lines} onChange={(event, lines) => {this.lines = lines; this.setState({render_revision: this.state.render_revision + 1}); } } aria-label="lines available">
              {this.renderButtons()}
            </ToggleButtonGroup>
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => this.props.addplot(this.plotname, this.lines)} color="default">
            Save
        </Button>
        </DialogActions>
      </Dialog>
    );
  }
}

AddGraph.propTypes = {
  show: propTypes.bool.isRequired,
  lines_available: propTypes.array.isRequired,
  addplot: propTypes.func.isRequired,
}