/** Contains the base fields for Task reuse **/
import React, { Component } from 'react';
import { Platform, View } from 'react-native';
import { FormInput } from 'react-native-elements';
import { connect } from 'react-redux';
import { FormMessage, FormLabel } from '../common/';
import { taskFormReset, taskUpdate } from '../../actions';
import colors from '../../config/colors.json';
import { strings } from '../../locales/i18n';

class TaskForm extends Component {
  /**
  * Component Will Unmount
  **/
  componentWillUnmount() {
    this.props.taskFormReset();
  }

  /**
  * Render method
  **/
  render() {
    return (
      <View>
      <FormLabel required labelText={strings('forms.task.taskName_labelText')} />
        <FormInput
          value={this.props.taskName}
          placeholder={strings('forms.task.taskName_placeholder')}
          onChangeText={value => this.props.taskUpdate({ prop: 'taskName', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.inputTextStyle}
        />

        <FormLabel required labelText={strings('forms.task.taskDescription_labelText')} />
        <FormInput
          value={this.props.taskDescription}
          placeholder={strings('forms.task.taskDescription_placeholder')}
          onChangeText={value => this.props.taskUpdate({ prop: 'taskDescription', value })}
          autoCorrect={false}
          autoCapitalize='none'
          multiline
          numberOfLines={4}
          inputStyle={styles.textBoxStyles}
        />
        <FormMessage error={this.props.error} />
      </View>
    );
  }
}

const styles = {
  textBoxStyles: {
    flex: 1,
    width: '100%',
    borderBottomWidth: Platform.OS === 'android' ? 1 : 0,
    borderColor: colors.middleGrey,
    color: colors.black
  },
  inputTextStyle: {
    color: colors.black
  }
};

// If you add any items here be sure to update the lists in
// TaskEditScreen, TaskCreateScreen, TaskActions, and TaskFormReducer
const mapStateToProps = (state) => {
  const {
    taskName,
    taskDescription,
    taskCreateDate,
    error
  } = state.taskForm;

  return {
    taskName,
    taskDescription,
    taskCreateDate,
    error
  };
};

export default connect(mapStateToProps, {
  taskFormReset, taskUpdate
})(TaskForm);
