import React, { Component, PropTypes } from 'react';
import {
  View,
  StyleSheet,
} from 'react-native';
import t from 'tcomb-form-native';
import newEventFormStylesheet from '../config/newEventFormStylesheet';

const Form = t.form.Form;

const nameRefined = t.refinement(t.String, string => string.length > 0 && string.length < 30);


const Name = t.struct({
  name: nameRefined,
});

const NameOptions = {
  fields: {
    name: {
      label: 'Event Name',
      underlineColorAndroid: 'transparent',
      placeholder: 'Insert name here',
      stylesheet: newEventFormStylesheet,
      error: 'Name should be an appropriate length.',
    },
  },
};

export default class GetEventName extends Component {
  static propTypes = {
    value: PropTypes.any,
    onChange: PropTypes.func,
  }

  componentDidMount() {
    this.name.validate();
  }

  isValid = () => {
    return this.name.validate().isValid();
  }

  render() {
    return (
      <View style={ styles.container }>
        <Form
          { ...this.props }
          type={ Name }
          ref={ r => { this.name = r; } }
          value={ this.props.value }
          onChange={ (name) => {
            this.props.onChange(name);
            this.name.validate();
          } }
          options={ NameOptions }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

@@ -328,10 +328,10 @@
 h %3C 
-30
+45
 );%0A%0A

increase event name length cap