import React, { Component } from 'react';
import {
  Grid,
  InputLabel,
  Input,
  FormControl,
  FormHelperText,
  Popover,
  Button
} from '@material-ui/core';
import { SketchPicker } from 'react-color';

import './JobForm.css';


export default class JobForm extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isOpen: false,
      anchorEl: null
    }
  }

  open = (e) => this.setState({ isOpen: true, anchorEl: e.currentTarget })
  close = () => this.setState({ isOpen: false });

  onKeyDown = (event) => {
    if (event.key === 'Enter') {
      this.props.handleSubmit(event)
    }
  }


  render() {
    const { handleChange, setErrors, handleSubmit } = this.props;
    return (
      <div className="JobForm">
        <Grid spacing={2} container>
          <Grid item xs={12} className="jobLine">
            <div className='bookmark-job' style={{ backgroundColor: this.props.color }} onClick={(e) => this.open(e)}></div>
            <Popover
              open={this.state.isOpen}
              onClose={this.close}
              anchorEl={this.state.anchorEl}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left',
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'left',
              }}>
              <SketchPicker
                color={this.props.color}
                onChange={(e) => this.props.handleChange('color', e.hex)}
              />
            </Popover>
            <FormControl disabled={this.props.submitting} error={this.props.error.name ? true : false} fullWidth>
              <InputLabel htmlFor="input-name">Nom</InputLabel>
              <Input
                autoFocus={true}
                onKeyDown={this.onKeyDown}
                onBlur={() => setErrors(['name'])}
                id="input-name"
                value={this.props.name}
                onChange={e => handleChange('name', e.target.value)}
                inputProps={{
                  maxLength: "50"
                }}
              />
            </FormControl>
          </Grid>
        </Grid>
      </div>
    );
  }
};