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 { 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";

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 / 4 + 10,
      },
    }),
  },
};

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(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();
      }
    })
  };

  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
          title="Guest"
          subtitle="You are not login!"
          leftAvatar={{source: Assets.logo.profileHolder}}
          bottomDivider
          containerStyle={{ backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}
          titleStyle={{fontWeight: 'bold', fontSize: 15, color: this.props.app_theme?.theme.colors.text}}
        />
      );
    } else {
      return (
        <View style={{justifyContent: 'center'}}>
          <ListItem
            title={item.name}
            subtitle={cn}
            leftAvatar={{source: item.avatar_url != '' ? {uri: item.avatar_url} : Assets.logo.profileHolder}}
            rightIcon={{
              name: item.icon,
              color: this.props.app_theme?.theme.colors.text,
              onPress: () => this.navigateTo('Account', { test: {} }),
            }}
            bottomDivider
            containerStyle={this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }}
            subtitleStyle={{ color: this.props.app_theme?.theme.colors.text }}
            titleStyle={{fontWeight: 'bold', fontSize: 15, color: this.props.app_theme?.theme.colors.text}}
          />
        </View>
      );
    }
  }

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

  render() {
    return (
      <SafeAreaView>
        <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={{fontSize: 16}}
        />
        <View>
          {Options.map((item, i) => (
            <ListItem
              key={i}
              title={item.title}
              leftIcon={<Elements.icon name={item.icon} size={25} />}
              titleStyle={[this.state.guest ? styles.titleDisabled : styles.title, { color: !this.state.guest ? this.props.app_theme?.theme.colors.text : '#7e7e7e' }]}
              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 || {})
              }}
            />
          ))}
        </View>
        <View>
          {Options2.map((item, i) => (
            <ListItem
              key={i}
              title={item.title}
              leftIcon={<Elements.icon name={item.icon} size={25} />}
              titleStyle={[styles.title, { color: this.props.app_theme?.theme.colors.text }]}
              containerStyle={[styles.container, this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }]}
              bottomDivider={i == Options2.length - 1 ? true : false}
              onPress={() => {
                this.navigateTo(item.screen, item.props || {}, item.screen)
              }}
            />
          ))}
        </View>
        {this.state.guest ? (
          <View style={styles.marginEnroll}>
            <TouchableOpacity
              style={styles.enrollBtn}
              onPress={() => {
                let props = this.props.props
                props.navigation.reset({
                  index: 0,
                  routes: [{name: 'Login'}],
                });
              }}>
              <Text style={styles.enrollBtnTxt}>Enroll Your Card Now</Text>
            </TouchableOpacity>
          </View>
        ) : (
          <ListItem
            key={12}
            title="Logout"
            leftIcon={<Elements.icon name={'logout'} size={25} />}
            titleStyle={[styles.title, { color: this.props.app_theme?.theme.colors.text }]}
            containerStyle={[styles.container, this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }]}
            onPress={() => {
              this.props.props.navigation.closeDrawer();
              this.props.openModal({
                open: true,
                title: "Logout",
                body: "Are you sure you want to logout?",
                yesCB: this.onLogout,
                theme: this.props.app_theme
              })
            }}
          />
        )}
      </SafeAreaView>
    )
  }
}

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

const mapDispatchToProps = {
  openModal
}

export default connect(mapStateToProps, mapDispatchToProps)(CustomDrawer)