import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { changeContent, setError, deleteError } from '../../../actions/tutorialBuilderActions';

import hardware from '../../../data/hardware.json';

import { fade } from '@material-ui/core/styles/colorManipulator';
import { withStyles } from '@material-ui/core/styles';
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';
import FormHelperText from '@material-ui/core/FormHelperText';

const styles = theme => ({
  multiGridListTile: {
    background: fade(theme.palette.secondary.main, 0.5),
    height: '30px'
  },
  multiGridListTileTitle: {
    color: theme.palette.text.primary
  },
  border: {
    '&:hover': {
      width: 'calc(100% - 4px)',
      height: 'calc(100% - 4px)',
      border: `2px solid ${theme.palette.primary.main}`
    }
  },
  active: {
    width: 'calc(100% - 4px)',
    height: 'calc(100% - 4px)',
    border: `2px solid ${theme.palette.primary.main}`
  },
  errorColor: {
    color: theme.palette.error.dark,
    lineHeight: 'initial',
    marginBottom: '10px'
  }
});

class Requirements extends Component {

  onChange = (hardware) => {
    var hardwareArray = this.props.value;
    if(hardwareArray.filter(value => value === hardware).length > 0){
      hardwareArray = hardwareArray.filter(value => value !== hardware);
    }
    else {
      hardwareArray.push(hardware);
      if(this.props.error.steps[this.props.index].hardware){
        this.props.deleteError(this.props.index, 'hardware');
      }
    }
    this.props.changeContent(this.props.index, 'hardware', hardwareArray);
    if(hardwareArray.length === 0){
      this.props.setError(this.props.index, 'hardware');
    }
  }

  render() {
    var cols = isWidthDown('md', this.props.width) ? isWidthDown('sm', this.props.width) ? isWidthDown('xs', this.props.width) ? 2 : 3 : 4 : 6;
    return (
      <div>
        <FormHelperText style={this.props.error.steps[this.props.index].hardware ? {lineHeight: 'initial', marginTop: '5px'} : {marginTop: '5px', lineHeight: 'initial', marginBottom: '10px'}}>Beachte, dass die Reihenfolge des Auswählens maßgebend ist.</FormHelperText>
        {this.props.error.steps[this.props.index].hardware ? <FormHelperText className={this.props.classes.errorColor}>Wähle mindestens eine Hardware aus.</FormHelperText> : null}
        <GridList cellHeight={100} cols={cols} spacing={10}>
        {hardware.map((picture,i) => (
          <GridListTile key={i} onClick={() => this.onChange(picture.id)} classes={{tile: this.props.value.filter(value => value === picture.id).length > 0 ? this.props.classes.active : this.props.classes.border}}>
            <div style={{margin: 'auto', width: 'max-content'}}>
              <img src={`/media/hardware/${picture.src}`} alt={picture.name} height={100} style={{cursor: 'pointer'}} />
            </div>
            <GridListTileBar
              classes={{root: this.props.classes.multiGridListTile}}
              title={
                <div style={{overflow: 'hidden', textOverflow: 'ellipsis'}} className={this.props.classes.multiGridListTileTitle}>
                  {picture.id}
                </div>
              }
            />
          </GridListTile>
        ))}
        </GridList>
      </div>
    );
  };
}

Requirements.propTypes = {
  changeContent: PropTypes.func.isRequired,
  setError: PropTypes.func.isRequired,
  deleteError: PropTypes.func.isRequired,
  change: PropTypes.number.isRequired
};

const mapStateToProps = state => ({
  change: state.builder.change
});

export default connect(mapStateToProps, { changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(withWidth()(Requirements)));