import React from 'react';
import PropTypes from 'prop-types';
import SectionHeading from '../components/SectionHeading';
import _ from 'lodash';

const styles = {
  textarea: {
    marginTop: 20,
    fontSize: 14,
    border: '4px solid rgba(153,117,185, 0.4)',
    width: '100%'
  }
};

const notePrompts = `What are this student's strengths?
——————————


What is this student's involvement in the school community like?
——————————


How does this student relate to their peers?
——————————


Who is the student's primary guardian?
——————————


Any additional comments or good things to know about this student?
——————————


`;

const restrictedNotePrompts = `Is this student receiving Social Services and if so, what is the name and contact info of their social worker?
——————————


Is this student receiving mental health supports?
——————————
  `;

class TransitionNotes extends React.Component {

  constructor(props) {
    super(props);

    const {defaultTransitionNotes} = props;
    const regularNote = _.find(defaultTransitionNotes, {is_restricted: false});
    const restrictedNote = _.find(defaultTransitionNotes, {is_restricted: true});

    this.state = {
      noteText: (regularNote ? regularNote.text : notePrompts),
      restrictedNoteText: (restrictedNote ? restrictedNote.text : restrictedNotePrompts),
    };

    this.onClickSave = this.onClickSave.bind(this);
    this.onClickSaveRestricted = this.onClickSaveRestricted.bind(this);
    this.onChangeRegularNote = this.onChangeRegularNote.bind(this);
    this.onChangeRestrictedNote = this.onChangeRestrictedNote.bind(this);
    this.buttonText = this.buttonText.bind(this);
    this.buttonTextRestricted = this.buttonTextRestricted.bind(this);
  }

  buttonText() {
    const {requestState} = this.props;

    if (requestState === 'pending') return 'Saving ...';

    if (requestState === 'error') return 'Error ...';

    return 'Save Note';
  }

  buttonTextRestricted() {
    const {requestStateRestricted} = this.props;

    if (requestStateRestricted === 'pending') return 'Saving ...';

    if (requestStateRestricted === 'error') return 'Error ...';

    return 'Save Note';
  }

  onClickSave() {
    const params = {
      is_restricted: false,
      text: this.state.noteText
    };

    this.props.onSave(params);
  }

  onClickSaveRestricted() {
    const params = {
      is_restricted: true,
      text: this.state.restrictedNoteText
    };

    this.props.onSave(params);
  }

  onChangeRegularNote(e) {
    this.setState({noteText: e.target.value});
  }

  onChangeRestrictedNote(e) {
    this.setState({restrictedNoteText: e.target.value});
  }

  render() {
    const {noteText, restrictedNoteText, readOnly} = this.state;

    return (
      <div style={{display: 'flex'}}>
        <div style={{flex: 1, margin: 30}}>
          <SectionHeading>
            High School Transition Note
          </SectionHeading>
          <textarea
            rows={10}
            style={styles.textarea}
            value={noteText}
            onChange={this.onChangeRegularNote}
            readOnly={readOnly} />
          {this.renderButton(this.onClickSave, this.buttonText)}
        </div>
        <div style={{flex: 1, margin: 30}}>
          <SectionHeading>
            High School Transition Note (Restricted)
          </SectionHeading>
          <textarea
            rows={10}
            style={styles.textarea}
            value={restrictedNoteText}
            onChange={this.onChangeRestrictedNote}
            readOnly={readOnly} />
          {this.renderButton(this.onClickSaveRestricted, this.buttonTextRestricted)}
        </div>
      </div>
    );
  }

  renderButton(onClickFn, buttonTextFn) {
    const {readOnly} = this.props;

    if (readOnly) return null;

    return (
      <button onClick={onClickFn} className='btn save'>
        {buttonTextFn()}
      </button>
    );
  }

}

TransitionNotes.propTypes = {
  readOnly: PropTypes.bool.isRequired,
  onSave: PropTypes.func.isRequired,
  defaultTransitionNotes: PropTypes.array.isRequired,
  requestState: PropTypes.string,              // can be null if no request
  requestStateRestricted: PropTypes.string     // can be null if no request
};

export default TransitionNotes;


@@ -2706,16 +2706,79 @@
 s.state;
+%0A    const %7BrequestState, requestStateRestricted%7D = this.props;
 %0A%0A    re
@@ -3172,32 +3172,45 @@
 is.renderButton(
+%0A            
 this.onClickSave
@@ -3210,16 +3210,28 @@
 ickSave,
+%0A           
  this.bu
@@ -3238,16 +3238,97 @@
 ttonText
+,%0A            (requestState === 'pending' %7C%7C requestState === 'error')%0A          
 )%7D%0A     
@@ -3721,16 +3721,29 @@
 rButton(
+%0A            
 this.onC
@@ -3761,16 +3761,28 @@
 tricted,
+%0A           
  this.bu
@@ -3799,16 +3799,117 @@
 stricted
+,%0A            (requestStateRestricted === 'pending' %7C%7C requestStateRestricted === 'error')%0A          
 )%7D%0A     
@@ -3981,16 +3981,28 @@
 onTextFn
+, isDisabled
 ) %7B%0A    
@@ -4111,16 +4111,30 @@
 ClickFn%7D
+%0A             
  classNa
@@ -4140,17 +4140,18 @@
 ame=
-'
+%7B%60
 btn save
 '%3E%0A 
@@ -4146,17 +4146,90 @@
 btn save
-'
+ $%7BisDisabled ? 'btn-disabled' : ''%7D%60%7D%0A              disabled=%7BisDisabled%7D
 %3E%0A      

Disable saving button if request is pending/error, grey it out to