/**
 * 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,
} from 'native-base';
import styles from './style';
import routeSidebar from './data';
import { NavigationStackScreenProps } from 'react-navigation-stack';

const drawerCover = require('../../../assets/grocery/user.jpeg');

interface Iprops extends NavigationStackScreenProps{

}

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

  constructor(props:Iprops) {
    super(props);
    this.state = {
      shadowOffsetWidth: 1,
      shadowRadius: 4
    };
  }
  navigateItems = () => {
    this.props.navigation.navigate('GroceryMyaccount')
  }

  goToProfile = () => {
    this.props.navigation.navigate('GroceryMyaccount');
  }

  render() {
    return (
      <Container style={styles.androidStatusbar}>
        <Content>
          <Grid>
            <Row>
              <Col>
                <ListItem avatar style={styles.contentCenter} onPress={this.goToProfile}>
                  <Left>
                    <Thumbnail source={drawerCover} />
                  </Left>
                  <Body style={styles.bodyItem}>
                    <Text>Hey John Smith</Text>
                  </Body>
                  <Right style={styles.rightIcon}>
                    <Icon
                      name={'ios-arrow-forward'}
                      style={styles.iconLeft}
                      type='Ionicons'
                    />
                  </Right>
                </ListItem>
              </Col>
            </Row>
            <Row>
              <Col>
                <ListItem avatar style={styles.contentCenter}>
                  <Left style={styles.leftCont}>
                    <Icon
                      name={'pin'}
                      style={styles.iconLeft}
                      type='Ionicons'
                    />
                  </Left>
                  <Body style={styles.body2WithnoBorder}>
                    <Text note>Your Location</Text>
                    <Text>Jaipur</Text>
                  </Body>
                </ListItem>
              </Col>
            </Row>
            <Row>
              <Col style={styles.colContent}>
                {
                  routeSidebar.sideMenuIconRow.map((data, index) => {
                    return (
                      <TouchableOpacity style={styles.touch} onPress={this.navigateItems} key={index}>
                        <Body>
                          <Icon name={data.iconName} type='Ionicons' style={styles.iconSize} />
                          <Text style={styles.colorWhite}>{data.name}</Text>
                        </Body>
                      </TouchableOpacity>

                    )
                  })
                }
              </Col>
            </Row>
          </Grid>


          <List
            dataArray={routeSidebar.sidebars}
            renderRow={data =>
              <ListItem
                button
                noBorder
                onPress={() => this.props.navigation.navigate({ routeName: data.route, key: data.route })}
              >
                <Left>
                  <Icon
                    active
                    name={data.icon}
                    style={styles.icon}
                    type='Ionicons'
                  />
                  <Text style={styles.text}>
                    {data.name}
                  </Text>
                </Left>
              </ListItem>}
          />
        </Content>
      </Container>
    );
  }
}

export default SideBar;
