// @flow
import React, { Component } from 'react';
import { StyleSheet, View, SectionList, Text } from 'react-native';
import * as Animatable from 'react-native-animatable';
import { TrelloCard } from 'DailyScrum/src/components';
import type { CardListsType } from 'DailyScrum/src/modules/cards/reducer';
import type { CardType } from '../../types';
import { FilterMembers, ListHeader } from './';

class CardsList extends Component {
  props: PropsType;
  state: StateType = {
    cards: [],
    filteredMember: null,
    isRefreshing: false,
  };

  // TODO identify unchecked checklists
  // TODO extract and show post estimated points
  // TODO show labels
  // TODO on click show attachments
  // TODO on click show description

  componentDidMount() {
    this.configure(this.props);
  }

  componentWillReceiveProps(nextProps: PropsType) {
    if (nextProps.cardLists !== this.props.cardLists) {
      this.configure(nextProps);
    }
  }

  configure = (props: PropsType) => {
    let cards = [];
    // $FlowFixMe https://github.com/facebook/flow/issues/2221
    Object.values(props.cardLists).forEach(list => list.forEach(card => cards.push(card)));

    this.setState({
      cards,
    });
  };

  handleRefresh = () => {
    this.setState({ isRefreshing: true }, () => {
      this.props.onRefresh().then(() =>
        this.setState({
          isRefreshing: false,
        })
      );
    });
  };

  filterMember = (memberId: string) => {
    this.setState({ filteredMember: this.state.filteredMember !== memberId ? memberId : null });
  };

  renderCard = ({ item }: { item: CardType }) => <TrelloCard card={item} />;
  renderSectionHeader = ({ section }: { section: { data: [], key: string } }) =>
    (section.data.length ? <ListHeader listKey={section.key} /> : null);

  render() {
    if (!this.state.cards.length)
      return <View style={this.props.style}><Text style={styles.noCardsText}>No cards yet</Text></View>;

    const { cardLists } = this.props;
    // $FlowFixMe https://github.com/facebook/flow/issues/2221
    const sections = Object.entries(cardLists).map(([listKey, listCards]: [string, CardType[]]) => ({
      key: listKey,
      data: listCards.filter(
        card => (this.state.filteredMember ? card.idMembers.includes(this.state.filteredMember) : true)
      ),
    }));

    return (
      <View style={[styles.container, this.props.style]}>
        <Animatable.View animation="slideInDown">
          <FilterMembers
            style={styles.filterContainer}
            cards={this.state.cards}
            filtered={this.state.filteredMember}
            onFilter={this.filterMember}
          />
        </Animatable.View>
        <Animatable.View animation="fadeIn" style={{ flex: 1 }}>
          <SectionList
            contentContainerStyle={styles.listsContainer}
            showsVerticalScrollIndicator={false}
            refreshing={this.state.isRefreshing}
            onRefresh={this.handleRefresh}
            SectionSeparatorComponent={() => <View style={styles.listSeparator} />}
            renderSectionHeader={this.renderSectionHeader}
            renderItem={this.renderCard}
            keyExtractor={(card: CardType) => card.idShort}
            sections={sections}
          />
        </Animatable.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
  },
  noCardsText: {
    textAlign: 'center',
  },
  filterContainer: {
    flexGrow: 1,
    justifyContent: 'space-around',
    paddingBottom: 10,
  },
  listsContainer: {
    paddingVertical: 10,
  },
  listName: {
    marginBottom: 5,
  },
  listSeparator: {
    marginTop: 20,
  },
});

type StateType = {
  isRefreshing: boolean,
  filteredMember: ?string,
  cards: CardType[],
};

type PropsType = {
  style?: any,
  cardLists: CardListsType,
  onRefresh: Function,
};

export default CardsList;

@@ -1794,21 +1794,26 @@
 nder
+Empty = 
 () 
-%7B
+=%3E
 %0A    
-if (
 !thi
@@ -1836,106 +1836,127 @@
 ngth
-)%0A      return %3CView style=%7Bthis.props.style%7D%3E%3CText style=%7Bstyles.noCardsText%7D%3ENo cards yet
+ &&%0A    %3CView style=%7Bstyles.emptyContainer%7D%3E%0A      %3CText%3ENo cards yet%3C/Text%3E%0A      %3CText%3EPull to refresh :)
 %3C/Text%3E
+%0A    
 %3C/Vi
@@ -1961,16 +1961,29 @@
 View%3E;%0A%0A
+  render() %7B%0A
     cons
@@ -2421,16 +2421,56 @@
 tyle%5D%7D%3E%0A
+        %7B!!this.state.cards.length &&%0A  
         
@@ -2511,16 +2511,18 @@
 nDown%22%3E%0A
+  
         
@@ -2550,16 +2550,18 @@
         
+  
 style=%7Bs
@@ -2575,32 +2575,34 @@
 ilterContainer%7D%0A
+  
             card
@@ -2630,24 +2630,26 @@
             
+  
 filtered=%7Bth
@@ -2685,16 +2685,18 @@
         
+ 
+ 
 onFilter
@@ -2718,35 +2718,39 @@
 mber%7D%0A          
+  
 /%3E%0A
+  
         %3C/Animat
@@ -2755,24 +2755,25 @@
 atable.View%3E
+%7D
 %0A        %3CAn
@@ -3232,16 +3232,67 @@
 erCard%7D%0A
+            ListHeaderComponent=%7Bthis.renderEmpty%7D%0A
         
@@ -3521,36 +3521,60 @@
 ,%0A  
-noCardsText: %7B%0A    textAlign
+emptyContainer: %7B%0A    marginTop: 100,%0A    alignItems
 : 'c

Move show "empty" text