/**
 * 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 {
  Content,
  Text,
  List,
  ListItem,
  Icon,
  Container,
  Left,
  CardItem
} from 'native-base';
import styles from './style';
import routeSidebar from './data';
import { NavigationStackScreenProps } from 'react-navigation-stack';

interface SidebarProps extends NavigationStackScreenProps {
}
interface SidebarState {
  shadowOffsetWidth: number
  shadowRadius: number
}
class SideBar extends Component<SidebarProps, SidebarState> {
  static navigationOptions = {
    drawerLabel: () => null,
    header: false,
  }

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

  goToProfile = () => {
    this.props.navigation.navigate('Myaccount');
  }
  navigateTo = (data: any) => {
    this.props.navigation.navigate({ routeName: data.route, key: data.route })
    this.props.navigation.closeDrawer();
  }
  render() {
    return (
      <Container style={styles.androidStatusbar}>
        <Content>
          <CardItem header style={styles.sideHeader}>
            <Text style={styles.headeText}>Star App</Text>
          </CardItem>
          <List
            dataArray={routeSidebar.sidebars}
            renderRow={data =>
              <ListItem
                button
                noBorder
                onPress={() => this.navigateTo(data)}
              >
                <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;
