import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View
} from 'react-native';

const CHECKMARK = String.fromCharCode(10003);

const styles = StyleSheet.create({
  header: {
    paddingHorizontal: 16,
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center"
  },
  input: {
    flex: 1,
    fontSize: 24,
    height: 50,
    marginLeft: 16
  },
  toggleIcon: {
    color: "#CCC",
    fontSize: 30
  }
});

class Header extends Component {
  render() {
    return (
      <View style={styles.header}>
        <TouchableOpacity
          onPress={this.props.onToggleAllComplete}
        >
          <Text style={styles.toggleIcon}>{CHECKMARK}</Text>
        </TouchableOpacity>
        <TextInput
          blurOnSubmit={false}
          onChangeText={this.props.onChange}
          onSubmitEditing={this.props.onAddItem}
          placeholder="What needs to be done?"
          returnKeyType="done"
          style={styles.input}
          value={this.props.value}
        />
      </View>
    );
  }
}

export default Header;