import * as React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  FlatList,
  Alert,
  Platform,
  TouchableOpacity
} from 'react-native';
import { connect } from "react-redux";
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Avatar, Icon, ListItem } from 'react-native-elements';
import { openModal } from '../redux/actions/AlertActions.js';
import Assets from './assets.manager.js';
import Elements from './elements.js';
import DB from './storage/';
import Theme from '../components/theme.style.js';
import NetInfo from "../components/netstatus";
import CustomSafeArea from './safeArea.component.js';
import AdjustableText from './text/AdjustableText.js';

const User = [
  {
    name: 'Guest',
    avatar_url: Assets.logo.profileHolder,
    subtitle: '',
    icon: 'chevron-right',
  },
];

const Options = [
  {
    title: 'My Profile',
    icon: 'account',
    screen: 'MyProfile',
    props: { tab: 0, onBackPress: () => console.log('backed') }
  },
  {
    title: 'Top-up Points',
    icon: 'topup',
    screen: 'TopUp',
  },
  {
    title: 'Fuel Efficiency Tracker',
    icon: 'fuelTab',
    screen: 'Tracker',
  },
];

const Options2 = [
  {
    title: 'About Us',
    icon: 'about',
    screen: 'About',
  },
  {
    title: 'Loyalty Program',
    icon: 'card',
    screen: 'Loyalty',
  },
  {
    title: 'Contact Us',
    icon: 'contact',
    screen: 'Contact',
  },
  {
    title: 'Getting Started',
    icon: 'tutorial',
    screen: 'OnBoarding',
  },
];

const Drawer = createDrawerNavigator();

const styles = {
  container: { padding: 13, paddingTop: 14 },
  title: { fontSize: 13, marginLeft: 12 },
  titleDisabled: { fontSize: 13, marginLeft: 12, color: '#7e7e7e' },
  icon: { size: 28 },
  enrollBtn: {
    backgroundColor: '#e74610',
    height: Theme.screen.h / 17,
    marginHorizontal: 15,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  enrollBtnTxt: {
    textAlign: 'center',
    alignItems: 'center',
    color: '#fff',
    fontWeight: '600',
    fontSize: 16,
  },
  marginEnroll: {
    ...Platform.select({
      ios: {
        marginTop: Theme.screen.h / 2 - 270,
      },
      android: {
        marginTop: Theme.screen.h / 2 - 230,
      },
    }),
  },
};

class CustomDrawer extends React.PureComponent {

  constructor(props) {
    super(props)
    this.logoutdialog = false
  }

  state = {
    loading: false,
    guest: false
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  init = async () => {
    let isGuest = await DB.get('is_guest');
    this.setState({ guest: isGuest })
  };

  onLogout = async () => {
    this.setState({ loading: true })
    NetInfo.netstatus(async (isConnected) => {

      if (isConnected) {
        this.setState({ loading: false })
        this.logoutAccount(success => {
          let props = this.props.props
          props.navigation.reset({
            index: 0,
            routes: [{ name: 'Mpin' }],
          });
        }, error => { })
      } else {
        this.setState({ loading: false })
        Elements.nointernet2(this.props);
      }
    })
  };

  logoutAccount = (successCallback, errorCallback) => {
    DB.logoutAccount(success => {
      successCallback()
    }, error => { 
      errorCallback()
    })
  }

  navigateTo = (screen = null, param = null, drawerParam = null) => {
    let props = this.props.props
    let params = screen == "OnBoarding" ? { onBackToMain: () => this.backToMainView() } : param
    props.navigation.closeDrawer(drawerParam)
    props.navigation.navigate(screen, params)
  }

  renderItem(item) {
    let range = 4;
    let indexes = [0, 4, 8, 12];
    let cn = '';
    for (let i = 0; i < indexes.length; i++) {
      cn += item.subtitle.substr(indexes[i], range) + (i < indexes.length - 1 ? ' ' : '')
    }
    if (this.state.guest) {
      return (
        <ListItem
          bottomDivider
          containerStyle={this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }}
        >
          <Avatar
            source={Assets.logo.profileHolder}
          />
          <ListItem.Content>
            <ListItem.Title
              style={{ fontWeight: 'bold', fontSize: 15, color: this.props.app_theme?.theme.colors.text }}
            >
              Guest
            </ListItem.Title>
            <ListItem.Subtitle
              style={this.props.app_theme?.theme.dark ? { color: this.props.app_theme?.theme.colors.text } : { color: 'white' }}
            >
              You are not login!
            </ListItem.Subtitle>
          </ListItem.Content>
        </ListItem>
      );
    } else {
      return (
        <View style={{ justifyContent: 'center' }}>
          <ListItem
            bottomDivider
            containerStyle={this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }}
          >
            <Avatar 
              source={item.avatar_url !== '' ? { uri: item.avatar_url } : Assets.logo.profileHolder} 
            />
            <ListItem.Content>
              <ListItem.Title
                style={{ fontWeight: 'bold', fontSize: 15, color: this.props.app_theme?.theme.colors.text }}
              >
                {item.name}
              </ListItem.Title>
              <ListItem.Subtitle
                style={{ color: this.props.app_theme?.theme.colors.text }}
              >
                {cn}
              </ListItem.Subtitle>
            </ListItem.Content>
            <Icon
              name={item.icon}
              color={this.props.app_theme?.theme.colors.text}
              onPress={() => this.navigateTo('Account', { test: {} })}
            />
          </ListItem>
        </View>
      );
    }
  }

  backToMainView = () => {
    this.props.props.navigation.navigate('Main')
  }

  render() {
    return (
      <CustomSafeArea>
        <Elements.loader visible={this.state.loading} />
        <View style={{ marginTop: 18 }}></View>
        <FlatList
          keyExtractor={(item, index) => index.toString()}
          bounces={false}
          data={this.props.User}
          navigation={this.props.navigation}
          renderItem={({ item, index }) => {
            return this.renderItem(item, index)
          }}
          style={{ flexGrow: 0 }}
        />
        <View>
          {Options.map((item, i) => (
            <ListItem
              key={i}
              bottomDivider={i == Options.length - 1 ? true : false}
              containerStyle={[styles.container, this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }]}
              disabled={this.state.guest ? true : false}
              onPress={() => {
                this.navigateTo(item.screen, item.props || {})
              }}>
              <Elements.icon name={item.icon} size={25} />
              <ListItem.Content>
                <ListItem.Title
                  style={[this.state.guest ? styles.titleDisabled : styles.title, { color: !this.state.guest ? this.props.app_theme?.theme.colors.text : '#7e7e7e' }]}
                >
                  {item.title}
                </ListItem.Title>
              </ListItem.Content>
            </ListItem>
          ))}
        </View>
        <View>
          {Options2.map((item, i) => (
            <ListItem
              key={i}
              bottomDivider={i == Options2.length - 1 ? true : false}
              containerStyle={[styles.container, this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }]}
              onPress={() => {
                this.navigateTo(item.screen, item.props || {}, item.screen)
              }}>
              <Elements.icon name={item.icon} size={25} />
              <ListItem.Content>
                <ListItem.Title
                  style={[styles.title, { color: this.props.app_theme?.theme.colors.text }]}
                >
                  {item.title}
                </ListItem.Title>
              </ListItem.Content>
            </ListItem>
          ))}
        </View>
        
        {this.state.guest ? (
          <View style={styles.marginEnroll}>
            <TouchableOpacity
              style={styles.enrollBtn}
              onPress={async () => {
                let props = this.props.props
                await DB.set("is_guest", "false", () => {
                  props.navigation.reset({
                    index: 0,
                    routes: [{ name: 'Login' }],
                  });
                }, () => { });
              }}>
              <AdjustableText style={styles.enrollBtnTxt}>Enroll Your Card Now</AdjustableText>
            </TouchableOpacity>
          </View>
        ) : (
          <ListItem
            key={12}
            containerStyle={[styles.container,{marginTop: 2}, this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }]}
            onPress={() => {
              this.props.props.navigation.closeDrawer();
              Alert.alert("Logout", '\n' + 'Are you sure you want to logout?', [{ text: "CANCEL", onPress: () => { } }, { text: "OK", onPress: () => this.onLogout() }])
            }}
          >
            <Elements.icon name={'logout'} size={25} />
            <ListItem.Content>
              <ListItem.Title
                style={[styles.title, { color: this.props.app_theme?.theme.colors.text }]}
              >
                Logout
              </ListItem.Title>
            </ListItem.Content>
          </ListItem>
        )}
      </CustomSafeArea>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

const mapDispatchToProps = {
  openModal
}

export default connect(mapStateToProps, mapDispatchToProps)(CustomDrawer)