/** Used for the styling of everything in the drawer menu **/
import React, { Component } from 'react';
import { NavigationActions } from 'react-navigation';
import { Image, SafeAreaView, Text, TouchableOpacity, View } from 'react-native';
import { Divider } from 'react-native-elements';
import { strings } from '../../locales/i18n';

const LOGO = require('../../../assets/logo-horizontal.png');

class DrawerContent extends Component {
  navigateToScreen = (route) => () => {
    const navigate = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigate);
  }

  /**
  * Render method
  **/
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.mainContainerStyle}>
          <View>
            <View style={{ backgroundColor: '' }}>
              <Image
                source={LOGO}
                style={styles.logoStyle}
              />
            </View>

            <Text style={styles.headerStyle}>{strings('settings.drawer.account_title')}</Text>
            <TouchableOpacity onPress={this.navigateToScreen('profileHomeSceen')}>
              <Text style={styles.textLinkStyle}>{strings('profile.list_title')}</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={this.navigateToScreen('settingsMain')}>
              <Text style={styles.textLinkStyle}>{strings('settings.title')}</Text>
            </TouchableOpacity>

            <Text style={styles.headerStyle}>{strings('settings.drawer.tagfer_title')}</Text>
            <TouchableOpacity onPress={this.navigateToScreen('aboutScreen')}>
              <Text style={styles.textLinkStyle}>{strings('settings.about.title')}</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={this.navigateToScreen('contactUsScreen')}>
              <Text style={styles.textLinkStyle}>{strings('settings.contactUs.title')}</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={this.navigateToScreen('privacyPoliciesScreen')}>
              <Text style={styles.textLinkStyle}>{strings('settings.privacyPolicies.title')}</Text>
            </TouchableOpacity>

            <Divider style={styles.dividerStyle} />
          </View>

          <View>
            <Divider style={styles.dividerStyle} />
            <TouchableOpacity onPress={this.navigateToScreen('userLogout')}>
              <Text style={[styles.textLinkStyle, { color: '' }]}>{strings('logout.title')}</Text>
            </TouchableOpacity>
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = {
  mainContainerStyle: {
    flex: 1,
    justifyContent: 'space-between'
  },
  logoStyle: {
    height: 35,
    width: 125,
    marginVertical: 10,
    marginHorizontal: 20
  },
  headerStyle: {
    fontSize: 19,
    fontWeight: 'bold',
    color: '',
    marginLeft: 15,
    paddingTop: 10,
    paddingBottom: 10
  },
  textLinkStyle: {
    fontSize: 17,
    marginLeft: 15,
    paddingBottom: 12
  },
  dividerStyle: {
    backgroundColor: '',
    marginTop: 10,
    marginBottom: 15
  }
};

export default DrawerContent;
