/**
 * 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 from 'react';
import { Container, Left, Icon, Body, Content, Text, ListItem, Accordion, List, Tabs } from 'native-base';
import Firebase, { withFirebase } from '../../firebase';
import AppHeader from '../../components/firebase/AppHeader';
import { NavigationStackScreenProps } from 'react-navigation-stack';

interface MenuItemContent {
  text: string;
  icon: string;
  iconType: string | undefined;
  routeTo: string;
}

interface MenuType {
  title: string;
  content: Array<MenuItemContent>
}

const MenuItems: Array<MenuType> = [
  {
    title: 'Firebase', content: [
      { text: 'CRUD operation', icon: 'create', iconType: 'MaterialIcons', routeTo: 'Crud' },
      { text: 'Upload operation', icon: 'cloud-upload', iconType: 'MaterialIcons', routeTo: 'Upload' },
      { text: 'Login', icon: 'cloud-upload', iconType: 'MaterialIcons', routeTo: 'login' }
    ]
  },
  // {
  //   title: 'Redux', content: [
  //     { text: 'Home', icon: 'home', iconType: undefined, routeTo: 'Redux' }
  //   ]
  // },
  {
    title: 'Chat App Template', content: [
      { text: 'WhatsApp', icon: 'logo-whatsapp', iconType: undefined, routeTo: 'WhatsApp' },
      { text: 'Artboard', icon: 'color-palette', iconType: undefined, routeTo: 'Artboard' },
      { text: 'Breeze', icon: 'flower', iconType: undefined, routeTo: 'Breeze' }
    ]
  },
  {
    title: 'Popular layout', content: [
      { text: 'Instagram', icon: 'logo-instagram', iconType: undefined, routeTo: 'Instagram' },
      { text: 'Netflix', icon: 'netflix', iconType: 'MaterialCommunityIcons', routeTo: 'Netflix' },
      { text: 'Tinder', icon: 'flame', iconType: undefined, routeTo: 'Tinder' }
    ]
  },
  {
    title: 'Plugin List', content: [
      { text: 'Image Cropper', icon: 'image', iconType: undefined, routeTo: 'ImagePickerExample' },
      { text: 'Push Notification', icon: 'share', iconType: 'MaterialCommunityIcons', routeTo: 'PushNotificationExample' },
      { text: 'Network Info', icon: 'access-point-network', iconType: 'MaterialCommunityIcons', routeTo: 'NetInfoExapmle' },
      { text: 'Custom Fonts', icon: 'font-awesome', iconType: 'MaterialCommunityIcons', routeTo: 'CustomFontExample' },
      { text: 'Social Sharing', icon: 'share', iconType: 'MaterialCommunityIcons', routeTo: 'ShareExample' },
      { text: 'Video Player', icon: 'video', iconType: 'MaterialCommunityIcons', routeTo: 'VideoPlayerExample' },
      { text: 'Bar Code Scanner', icon: 'barcode-scan', iconType: 'MaterialCommunityIcons', routeTo: 'BarCodeScanner' },
      { text: 'Ad Mob', icon: 'open-in-app', iconType: 'MaterialCommunityIcons', routeTo: 'AdMobExample' },
      { text: 'Gif Support', icon: 'image', iconType: 'MaterialCommunityIcons', routeTo: 'GifSupport' },
      { text: 'In-App Browser', icon: 'open-in-app', iconType: 'MaterialCommunityIcons', routeTo: 'InAppBrowser' },
      { text: 'Google Maps', icon: 'google-maps', iconType: 'MaterialCommunityIcons', routeTo: 'MapView' },
      { text: 'Geo Coding', icon: 'google-maps', iconType: 'MaterialCommunityIcons', routeTo: 'GeoCode' },
      { text: 'Pull to Refresh', icon: 'refresh', iconType: 'MaterialCommunityIcons', routeTo: 'RefreshControl' },
    ],
  },
  {
    title: 'UI Components', content: [
      { text: 'Linear Gradient', icon: 'blur-linear', iconType: 'MaterialCommunityIcons', routeTo: 'LinearGradientExaple' },
      { text: 'Modal', icon: 'book-open-page-variant', iconType: 'MaterialCommunityIcons', routeTo: 'ModalExample' },
      { text: 'Android Date Time Picker', icon: 'android', iconType: 'MaterialCommunityIcons', routeTo: 'AndroidDateTimePickerExample' },
      { text: 'Alert', icon: 'alert', iconType: 'MaterialCommunityIcons', routeTo: 'AlertExample' },
      { text: 'Slides', icon: 'book-open-page-variant', iconType: 'MaterialCommunityIcons', routeTo: 'AppIntroSlider' },
    ],

  }
]

interface Iprops extends NavigationStackScreenProps {
  firebase: Firebase;
}
interface Istate {
}

class SideBar extends React.Component<Iprops, Istate> {

  getMenuItem = (child: Array<MenuItemContent>) => (
    <List>
      {child.map((el, index) => (
        <ListItem key={index} icon onPress={() => this.goto(el.routeTo)}>
          <Left>
            <Icon active name={el.icon} type={el.iconType} />
          </Left>
          <Body>
            <Text>{el.text}</Text>
          </Body>
        </ListItem>
      ))}
    </List>
  )
  logout = async () => {
    try {
      await this.props.firebase.signOut();
      this.props.navigation.navigate('Auth');
    } catch (e) {
      console.log(e, 'error in logout'); //todo error handling
    }
  }
  goto = (screen: string) => {
    console.log(screen, 'unable to route')
    if (screen === 'login') {
      this.logout();
    } else {
      this.props.navigation.navigate(screen);
    }
  }

  render() {
    return (
      <Container>
        <AppHeader title='React Native Full App' />
        <Content>
          <Accordion headerStyle={{
            backgroundColor: 'white'
          }} dataArray={MenuItems} renderContent={(item) => this.getMenuItem(item.content)}></Accordion>
          <ListItem icon button onPress={() => this.goto('GroceryHome')}>
            <Left>
              <Icon active name='home' type='MaterialCommunityIcons' />
            </Left>
            <Body>
              <Text>Shopping App Template</Text>
            </Body>
          </ListItem>
          <ListItem icon button onPress={() => this.goto('Redux')}>
            <Left>
              <Icon active name='home' type='MaterialCommunityIcons' />
            </Left>
            <Body>
              <Text>Redux</Text>
            </Body>
          </ListItem>
          <ListItem icon button onPress={this.logout}>
            <Left>
              <Icon active name='logout' type='MaterialCommunityIcons' />
            </Left>
            <Body>
              <Text>Logout</Text>
            </Body>
          </ListItem>
        </Content>
      </Container>
    )
  }
}

export default withFirebase(SideBar);
