import React from 'react';
import { Text, View, StyleSheet, TouchableHighlight } from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { NavigationActions } from 'react-navigation';
import { Icon } from 'react-native-elements';

import jurisdictionFile from '../../data/jurisdiction.json';
import statusFile from '../../data/status.json';
import { getItemById, mapToRealStatus } from '../../utils';
import { primaryColor, greyDark, greyLight } from '../../styles/colors';

class FoiRequestsListHeader extends React.Component {
  render() {
    const filterJurisdiction = this.props.filter.jurisdiction;
    let filterJurisdictionText = 'ALL';

    if (filterJurisdiction) {
      const jurisdictionName = jurisdictionFile.find(
        getItemById(filterJurisdiction)
      ).name;
      filterJurisdictionText = `${jurisdictionName}`.toUpperCase();
    }

    const filterStatus = this.props.filter.status;
    let filterStatusText = 'ALL';

    if (filterStatus) {
      const statusName = statusFile.find(getItemById(filterStatus)).name;
      filterStatusText = `${statusName}`.toUpperCase();
    }

    const filterCategory = this.props.filter.Category;
    let filterCategoryText = 'ALL';

    if (filterCategory) {
      // const categoryName = CategoryFile.find(getItemById(filterCategory)).name;
      const categoryName = 'Category'; // TODO
      filterCategoryText = `${categoryName}`.toUpperCase();
    }

    return (
      <View style={styles.container}>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
          }}
        >
          <View style={[styles.item, styles.firstItem]}>
            <TouchableHighlight
              onPress={this.props.navigateToFilterJurisdiction}
            >
              <View>
                <View style={styles.align}>
                  <Text style={styles.label}>JURISDICTION</Text>
                  <Icon
                    name="arrow-drop-down"
                    color={greyDark}
                    height={20}
                    width={20}
                  />
                </View>
                <Text style={styles.selection}>
                  {filterJurisdictionText}
                </Text>
              </View>
            </TouchableHighlight>
          </View>
          <View style={styles.item}>
            <TouchableHighlight onPress={this.props.navigateToFilterStatus}>
              <View>
                <View style={styles.align}>
                  <Text style={styles.label}>STATUS</Text>
                  <Icon
                    name="arrow-drop-down"
                    color={greyDark}
                    height={20}
                    width={20}
                  />
                </View>
                <Text style={styles.selection}>
                  {filterStatusText}
                </Text>
              </View>
            </TouchableHighlight>
          </View>
          <View style={styles.item}>
            <TouchableHighlight onPress={this.props.navigateToFilterCategory}>
              <View>
                <View style={styles.align}>
                  <Text style={styles.label}>CATEGORY</Text>
                  <Icon
                    name="arrow-drop-down"
                    color={greyDark}
                    height={20}
                    width={20}
                  />
                </View>
                <Text style={styles.selection}>
                  {filterCategoryText}
                </Text>
              </View>
            </TouchableHighlight>
          </View>
        </View>
      </View>
    );
  }
}

const mapStateToProps = state => {
  return {
    filter: state.foiRequests.filter,
    nResults: state.foiRequests.nResults,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    navigateToFilterJurisdiction: () =>
      dispatch(NavigationActions.navigate({ routeName: 'Jurisdiction' })),
    navigateToFilterStatus: () =>
      dispatch(NavigationActions.navigate({ routeName: 'Status' })),
    navigateToFilterCategory: () =>
      dispatch(NavigationActions.navigate({ routeName: 'Category' })),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(
  FoiRequestsListHeader
);

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderBottomColor: greyLight,
  },
  item: {
    flexGrow: 1,
    flexBasis: 0,
    borderLeftWidth: 1,
    borderColor: greyLight,
    paddingHorizontal: 10,
    paddingBottom: 5,
  },
  firstItem: {
    borderLeftWidth: 0,
  },
  label: {
    fontSize: 12,
    color: greyDark,
  },
  selection: {
    color: primaryColor,
    fontSize: 12,
  },
  align: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
});

@@ -479,24 +479,30 @@
 k, greyLight
+, grey
  %7D from '../
@@ -1806,16 +1806,51 @@
 iction%7D%0A
+              underlayColor=%7Bgrey%7D%0A
         
@@ -3936,32 +3936,41 @@
 %0A      dispatch(
+%0A        
 NavigationAction
@@ -3973,32 +3973,42 @@
 tions.navigate(%7B
+%0A         
  routeName: 'Jur
@@ -4008,24 +4008,57 @@
 e: '
-Jurisdiction' %7D)
+FoiRequestsFilterJurisdiction',%0A        %7D)%0A      
 ),%0A 
@@ -4097,32 +4097,41 @@
 %0A      dispatch(
+%0A        
 NavigationAction
@@ -4155,16 +4155,33 @@
 eName: '
+FoiRequestsFilter
 Status' 
@@ -4178,24 +4178,31 @@
 erStatus' %7D)
+%0A      
 ),%0A    navig
@@ -4243,16 +4243,25 @@
 ispatch(
+%0A        
 Navigati
@@ -4293,16 +4293,33 @@
 eName: '
+FoiRequestsFilter
 Category
@@ -4322,16 +4322,23 @@
 gory' %7D)
+%0A      
 ),%0A  %7D;%0A

fix filter header