// @flow
import React, { PureComponent } from 'react';
import { TouchableHighlight, View } from 'react-native';
import { connect } from 'react-redux';
import styled from 'styled-components/native';
import { DrawerItems, NavigationActions } from 'react-navigation';
import colors from '../colors';
import { Collection, User } from '../entity';
import { findArmyGroupForUser } from '../action/armyGroup';

const Container = styled.View`
  flex: 1;
  background-color: ${colors.background};
`;

const DrawerHeaderContainer = styled.View`
  backgroundColor: ${colors.secondary};
  padding: 15px;
`;

const ArmyGroupListHeader = styled.Text`
  margin-horizontal: 15;
  padding: 15px;
  color: ${colors.softGray};
  text-align: center;
  border-bottom-width: 1;
  border-bottom-color: ${colors.secondary};
`;

const DrawerHeader = styled.Text`
  color: ${colors.background};
  font-size: 18;
  font-weight: bold;
`;

const DrawerItem = styled.Text`
  color: ${colors.softGray};
  font-weight: bold;
  padding: 15px;
`;

type Props = {
  me: ?User,
  navigation: any,
  findArmyGroupForUser: Function,
  armyGroupList: ?Collection,
  onSelectArmyGroup: Function,
};
type Route = { key: string, routeName: string };

class DrawerMenu extends PureComponent {
  props: Props;
  state: { routes: Array<Route> };
  loggedRoutes: Array<Route>;
  anonymousRoutes: Array<Route>;

  constructor(props: Props) {
    super(props);

    this.state = {
      routes: [],
    };

    this.loggedRoutes = [
      { key: 'LastArmyList', routeName: 'LastArmyList' },
      { key: 'Logout', routeName: 'Logout' },
    ];
    this.anonymousRoutes = [{ key: 'Login', routeName: 'Login' }];
  }

  componentDidMount() {
    const { me } = this.props;

    if (me) {
      this.props.findArmyGroupForUser(me);
    }
  }

  componentDidUpdate(prevProps) {
    const { me } = this.props;

    if (!prevProps.me && me) {
      this.props.findArmyGroupForUser(me);
    }
  }

  render() {
    const {
      armyGroupList,
      me,
      navigation,
      onSelectArmyGroup,
      ...rest
    } = this.props;

    const newNavigation = navigation;
    newNavigation.state = Object.assign({}, navigation.state, {
      routes: me ? this.loggedRoutes : this.anonymousRoutes,
    });

    return (
      <Container>
        <DrawerHeaderContainer>
          <DrawerHeader>Army Creator</DrawerHeader>
        </DrawerHeaderContainer>

        <DrawerItems navigation={newNavigation} {...rest} />

        {armyGroupList &&
          armyGroupList.items.size > 0 &&
          <View>
            <ArmyGroupListHeader>Mes groupes</ArmyGroupListHeader>
            {armyGroupList.items.map(armyGroup => (
              <TouchableHighlight
                key={armyGroup.id}
                onPress={() => onSelectArmyGroup(armyGroup)}
                underlayColor="rgba(0,0,0,0.3)"
              >
                <DrawerItem>
                  {armyGroup.name}
                </DrawerItem>
              </TouchableHighlight>
            ))}
          </View>}
      </Container>
    );
  }
}

const mapStateToProps = state => ({
  me: state.app.get('me'),
  armyGroupList: state.app.get('armyGroupList'),
});

const mapDispatchToProps = {
  findArmyGroupForUser,
  onSelectArmyGroup: armyGroup =>
    NavigationActions.navigate({
      routeName: 'ProvidedArmyList',
      params: {
        armyGroup,
        title: armyGroup.name,
      },
    }),
};

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

@@ -1041,23 +1041,25 @@
 ,%0A  
-navigation: 
+items: Array%3C
 any
+%3E
 ,%0A  
@@ -1157,57 +1157,8 @@
 ,%0A%7D;
-%0Atype Route = %7B key: string, routeName: string %7D;
 %0A%0Acl
@@ -1216,43 +1216,8 @@
 ps;%0A
-  state: %7B routes: Array%3CRoute%3E %7D;%0A
   lo
@@ -1234,21 +1234,22 @@
 : Array%3C
-Route
+string
 %3E;%0A  ano
@@ -1268,21 +1268,22 @@
 : Array%3C
-Route
+string
 %3E;%0A%0A  co
@@ -1331,53 +1331,8 @@
 );%0A%0A
-    this.state = %7B%0A      routes: %5B%5D,%0A    %7D;%0A%0A
     
@@ -1352,30 +1352,16 @@
 utes = %5B
-%0A      %7B key: 
 'LastArm
@@ -1372,154 +1372,54 @@
 t', 
-routeName: 'LastArmyList' %7D,%0A      %7B key: 'Logout', routeName: 'Logout' %7D,%0A    %5D;%0A    this.anonymousRoutes = %5B%7B key: 'Login', routeName: 'Login' %7D
+'Logout'%5D;%0A    this.anonymousRoutes = %5B'Login'
 %5D;%0A 
@@ -1721,22 +1721,16 @@
  const %7B
-%0A     
  armyGro
@@ -1740,42 +1740,12 @@
 ist,
-%0A      me,%0A      navigation,%0A     
+ me,
  onS
@@ -1763,22 +1763,23 @@
 oup,
-%0A     
+ items,
  ...rest
 %0A   
@@ -1774,20 +1774,16 @@
  ...rest
-%0A   
  %7D = thi
@@ -1806,166 +1806,234 @@
 nst 
-newNavigation = navigation;%0A    newNavigation.sta
+filteredItems = me%0A      ? items.filter(i
 te
+m
  =
- Object.assign(%7B%7D, navigation.state, %7B%0A      routes: me ? this.loggedRoutes : this.anonymousRoutes,%0A
+%3E%0A          this.loggedRoutes.find(tmp =%3E tmp === item.routeName)%0A        )%0A      : items.filter(item =%3E%0A          this.anonymousRoutes.find(tmp =%3E tmp === item.routeName)%0A  
     
-%7D
+  
 );%0A%0A
@@ -2206,33 +2206,28 @@
 ems 
-navigation=%7BnewNavigation
+items=%7BfilteredItems
 %7D %7B.

upgrade to react-navigation 1.0.0-beta.11