/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  TextInput,
  TouchableOpacity,
} = React;

var MyApp = React.createClass({

  todos: [],

  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => true});
      //for(var i = 0; i<=10; i++){this.todos.push({text: 'I Will do:'+i, done: Math.random() > 0.5})}
      return {
        dataSource: ds.cloneWithRows(this.todos),
        input: ''
    };
  },

  editTodo: function(text){
    this.setState({input:text});
  },

  submitTodo: function(){
    this.todos.unshift({text: this.state.input, done: false});
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.todos),
      input: '',
    });
  },

  toggleTodo: function(i){
    this.todos[i].done = !this.todos[i].done;
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.todos),
    });
  },

  renderTodoItem: function(item, si, i){
    return (
      <View style={styles.row}>
        <View style={styles.rowLeft}>
          <Text>{item.text}</Text>
        </View>
        <View style={styles.rowRight}>
          <TouchableOpacity onPress={this.toggleTodo.bind(this, i)}>
            <Text style={[styles.todoText, item.done?styles.todoTextDone:null]}>√</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  },

  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.titleBar}>
          <Text style={styles.title}>Todo List</Text>
        </View>
        <View style={styles.listArea}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderTodoItem} />
        </View>
        <TextInput
          style={styles.input}
          value={this.state.input}
          onChangeText={this.editTodo}
          onSubmitEditing={this.submitTodo} />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  titleBar:{
    height: 55,
    padding: 20,
    backgroundColor: 'white',
    flex: 0,
  },
  title: {
    fontSize: 22,
    textAlign: 'center',
  },
  listArea: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
  rowLeft:{
    flex: 1
  },
  rowRight:{
    flex: 0,
    width: 20,
  },
  todoText: {
    textAlign: 'center',
    color: '#DDDDDD',
  },
  todoTextDone: {
    color: 'green',
  },
  input:{
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    padding: 5,
    flex: 0,
  },
});

AppRegistry.registerComponent('MyApp', () => MyApp);