/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */

import React, { Component } from 'react';

import { TouchableOpacity } from 'react-native';
import {
  Content,
  Text,
  List,
  ListItem,
  Icon,
  Container,
  Left,
  Thumbnail,
  Body,
  Right,
  Grid,
  Row,
  Col,
  View
} from 'native-base';
import styles from './style';
import routeSidebar from './data';
import { NavigationStackScreenProps } from 'react-navigation-stack';
import { connect } from 'react-redux';
import { AppReduxState } from '../../../redux/reducers';
import { bindActionCreators } from 'redux';
import { logoutUser } from '../../../redux/actions/Authentication';

const drawerCover = require('../../../assets/imgs/apple.png');

interface Iprops extends NavigationStackScreenProps {
  actions: any
}

interface Istates {
}

class SideBar extends Component<Iprops,Istates> {
  static navigationOptions = {
    drawerLabel: () => null,
    header: false,
  }

  constructor(props:Iprops) {
    super(props);
    this.state = {
      shadowOffsetWidth: 1,
      shadowRadius: 4
    };
  }
 

  logout = () => {
    const { navigation, actions } = this.props;
    actions.logoutUser();
    navigation.navigate('Auth');
  }

  render() {

    return (
      <Container style={styles.androidStatusbar}>
        <Content>
          <Grid>
            <Row>
              <Col>
                <ListItem avatar style={{ justifyContent: 'center' }}>
                  <Left>
                    <Thumbnail square source={drawerCover} style={{ width: 76, height: 76 }} />
                  </Left>
                  <Body style={{ paddingTop: 17, borderBottomWidth: 0, justifyContent: 'center' }}>
                    <Text>Hey John Snow</Text>
                  </Body>
                  <Right style={{ justifyContent: 'center', alignItems: 'flex-end', borderBottomWidth: 0 }}>
                    <Icon
                      name={'ios-arrow-forward'}
                      style={styles.iconLeft}
                      type='Ionicons'
                    />
                  </Right>
                </ListItem>
              </Col>
            </Row>
            <Row>
              <Col>
                <ListItem avatar style={{ justifyContent: 'center' }}>
                  <Left style={{ justifyContent: 'center', borderBottomWidth: 0 }}>
                    <Icon
                      name={'pin'}
                      style={styles.iconLeft}
                      type='Ionicons'
                    />
                  </Left>
                  <Body style={{ borderBottomWidth: 0, justifyContent: 'center' }}>
                    <Text note>Your Location</Text>
                    <Text>Jaipur</Text>
                  </Body>
                </ListItem>
              </Col>
            </Row>
          </Grid>
         
          <ListItem
                button
                noBorder
                onPress={this.logout}
          >
              <Left>
                  <Icon
                    active
                    name='log-out'
                    style={styles.icon}
                    type='Ionicons'
                  />
                  <Text style={styles.text}>
                    Logout
                  </Text>
                </Left></ListItem>
        </Content>
      </Container>
    );
  }
}


const mapStateToProps = (state:AppReduxState) => {
  return{
  };
}
const matchDispatchToProps = (dispatch:any) => ({
    actions: bindActionCreators({ logoutUser },dispatch)
})

export default connect(mapStateToProps,matchDispatchToProps)(SideBar);
