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

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 16
  },
  filter: {
    borderColor: "transparent",
    borderRadius: 5,
    borderWidth: 1,
    padding: 8
  },
  filters: {
    flexDirection: "row"
  },
  selected: {
    borderColor: "rgba(175, 47, 47, 0.2)"
  }
});

class Footer extends Component {
  render() {
    const { filter } = this.props;
    return (
      <View style={styles.container}>
        <Text>{this.props.count} count</Text>
        <View style={styles.filters}>
          <TouchableOpacity
            onPress={() => this.props.onFilter('ALL')}
            style={[styles.filter, filter === 'ALL' && styles.selected]}>
            <Text>All</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.props.onFilter('ACTIVE')}
            style={[styles.filter, filter === 'ACTIVE' && styles.selected]}>
            <Text>Active</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.props.onFilter('COMPLETED')}
            style={[styles.filter, filter === 'COMPLETED' && styles.selected]}>
            <Text>Completed</Text>
          </TouchableOpacity>
        </View>
        <TouchableOpacity onPress={this.props.onClearComplete}>
          <Text>Clear completed</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Footer.propTypes = {
  count: React.PropTypes.number,
  filter: React.PropTypes.string,
  onClearComplete: React.PropTypes.func,
  onFilter: React.PropTypes.func
};

export default Footer;