import React from 'react';
import Relay from 'react-relay';
import {BernieColors, BernieText} from './styles/bernie-css'
import {Paper} from 'material-ui';
import GCForm from './forms/GCForm';
import Form from 'react-formal';
import CreateCallAssignment from '../mutations/CreateCallAssignment';
import yup from 'yup';

export default class CallAssignmentCreationForm extends React.Component {
  styles = {
    formContainer: {
      width: 280,
      paddingLeft: 15,
      paddingRight: 15,
      paddingTop: 15,
      paddingBottom: 15,
      marginTop: 15,
      border: 'solid 1px ' + BernieColors.lightGray
    }
  }

  formSchema = yup.object({
    surveyId: yup.string().required(),
    callerGroupId: yup.string().required(),
    targetGroupId: yup.string().required(),
    name: yup.string().required(),
//    startDate: yup.date().required(),
//    endDate: yup.date()
  })

  state = {
    globalErrorMessage: null,
    globalStatusMessage: null
  }

  clearState() {
    this.setState({
      globalErrorMessage: null,
      globalStatusMessage: null
    })
  }

  render() {
    return (
      <div>
      <div style={BernieText.title}>
        Create Assignment
      </div>
      <div>
        Create a new phonebanking assignment. Before you fill out this form, make sure you've set up the correct objects in BSD.
      </div>
      <Paper zDepth={0} style={this.styles.formContainer}>
        <GCForm
          schema={this.formSchema}
          globalError={this.state.globalErrorMessage}
          globalStatus={this.state.globalStatusMessage}
          onSubmit={(formValue) => {
            this.clearState();
            let onFailure = (transaction) => {
              this.clearState()
              let defaultMessage = 'Something went wrong.'
              let error = transaction.getError();

              let errorMessage = error ? error.source.errors[0].message : defaultMessage;
              try {
                errorMessage = JSON.parse(errorMessage)
                errorMessage = errorMessage.message;
              } catch(ex) {
                errorMessage = defaultMessage;
              }
              this.setState({globalErrorMessage: errorMessage})
            };

            let onSuccess = (transaction) => {
              this.clearState()
              this.setState({globalStatusMessage: 'Call assignment created successfully!'})
            };

            Relay.Store.update(
              new CreateCallAssignment({
                listContainer: this.props.listContainer,
                ...formValue
              }), {onFailure, onSuccess}
            );
          }}
        >
          <Form.Field
            name='name'
            hintText='Name'
          />
          <br />
          <Form.Field
            name='surveyId'
            hintText='Survey ID (BSD ID)'
          /><br />
          <Form.Field
            name='callerGroupId'
            hintText='Caller Group (BSD cons_group ID)'
          /><br />
          <Form.Field
            name='targetGroupId'
            hintText='Target Group (BSD cons_group ID)'
          /><br />
          <Form.Button type='submit' label='Create!' fullWidth={true} />
        </GCForm>
      </Paper>
      </div>
    )
  }
}

export default Relay.createContainer(CallAssignmentCreationForm, {
  fragments: {
    listContainer: () => Relay.QL`
      fragment on ListContainer {
        ${CreateCallAssignment.getFragment('listContainer')},
      }
    `
  },
});

@@ -2699,24 +2699,49 @@
 Text='Name'%0A
+            label='Name'%0A
           /%3E
@@ -2737,24 +2737,24 @@
          /%3E%0A
-
           %3Cb
@@ -2846,24 +2846,54 @@
 D (BSD ID)'%0A
+            label='Survey ID'%0A
           /%3E
@@ -3002,32 +3002,65 @@
 cons_group ID)'%0A
+            label='Caller Group'%0A
           /%3E%3Cbr 
@@ -3109,32 +3109,32 @@
 'targetGroupId'%0A
-
             hint
@@ -3165,32 +3165,65 @@
 cons_group ID)'%0A
+            label='Target Group'%0A
           /%3E%3Cbr 

Define label and hintText separately, possible fix for #71