import React from 'react';
import {StyleSheet, View, TouchableOpacity, Image, ImageBackground, Text, ScrollView, Alert} from 'react-native';
import {getUserInfo, logoutAction} from '../actions/userActions';
import { bindActionCreators } from 'redux';
import {connect} from 'react-redux';
import {avatar, userIcon,persion,
  refresh,
  logout,
  info,
  icFeedback,
  icCall24Px,
  icBank} from '../utils/icons';
import {isEmpty, screenHeight} from '../utils/helper';
import {Navigation} from 'react-native-navigation';
import ProgressBar from '../components/common/ProgressBar';

class MenuDrawer extends React.PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      isLogged: false,
      username: 'Đăng Nhập',
      password: '',
      isLoading: true,
      data: [],
      avatar: avatar
    }
  }

  componentWillMount() {
    const data = this.props.userData;
    if(isEmpty(data)) {
      this.props.userActions('').then(() => {
        const data = this.props.userData;
        console.log("userData", data);
        this.setState({isLoading: false})
      }).catch(err => {
        this.setState({
          isLoading: false,
          isError: true,
          message: err.message
        });
        console.log("getUserInfoError", err);
      })
    }
  }

  componentDidUpdate(prreProps, prevState, snapshot) {
    const customerAddress = prreProps.userData;
    const newAddress = this.props.userData;
    if(customerAddress.phone != newAddress.phone || customerAddress.avatar != newAddress.avatar) {
      if(newAddress.avatar) {
        this.setState({
          avatar: {uri: newAddress.avatar}
        })
      }else {
        this.setState({
          avatar: avatar
        })
      }
      console.log("get data from pop", customerAddress);
    }
  }

  navigateToDetail = (screen) => {
    this.props.navigator.showModal({
      screen: screen,
      animationType: 'slide-horizontal',
      navigatorStyle: {
        navBarHidden: true,
        screenBackgroundColor: '#f0eff5'
      },
      passProps: {
        isModal: true,
        data: this.props.userData
      }
    });
  }

  push =(screen, link) => {
    this.props.navigator.toggleDrawer();
    if(!isEmpty(this.props.userData)) {
      Navigation.handleDeepLink({link:link, payload: screen})
    }
  }

  _navigatorToLogin = () => {
    this.props.navigator.toggleDrawer();
    if(!isEmpty(this.props.userData)) {
      const data = this.props.userData;
      Navigation.handleDeepLink({link:"LOGIN", payload: data.phone})
    }
  }

  _logout = () => {
    Alert.alert(
      'ĐĂNG XUẤT',
      'Bạn chắc chắn muốn kết thúc phiên đăng nhập này?',
      [
        {text: 'KHÔNG', onPress: () => null},
        {text: 'ĐỒNG Ý', onPress: () => this._navigatorToLogin()}
      ]
    )
  }

  render() {
    let data = this.props.userData;
    return (
      <ScrollView style={styles.container}
        showsVerticalScrollIndicator={false}
      >
        <View >
        <View style={{minHeight: (screenHeight - 130)}}>
          <View style={styles.header}>
            <View style={styles.wrapUser}>
              <Image source={this.state.avatar} style={styles.avatar}/>
              <View style={styles.userInfo}>
                <View style={styles.wrapUsername}>
                  <Text style={styles.username}>{data.name? data.name : 'Bạn chưa đăng nhập'}</Text>
                  <Image source={userIcon} />
                </View>
                <Text style={styles.userPhone}>{data.phone ? data.phone : ''}</Text>
              </View>
            </View>
          </View>
          <TouchableOpacity style={styles.wrapItem} onPress={() => this.push('app.UserProfile', 'USER')}>
            <Image source={persion}/>
            <Text style={styles.itemText}>THÔNG TIN CÁ NHÂN</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.wrapItem} onPress={() => this.push('app.UserBank', 'USER')}>
            <Image source={icBank}/>
            <Text style={styles.itemText}>TÀI KHOẢN NGÂN HÀNG</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.wrapItem} onPress={() => this.push('app.Otp', 'USER')}>
            <Image source={refresh}/>
            <Text style={styles.itemText}>ĐỔI MẬT KHẨU</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.wrapItem} onPress={() =>this.push('app.About', 'USER')}>
            <Image source={info}/>
            <Text style={styles.itemText}>GIỚI THIỆU</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.wrapItem} onPress={() => this.push('app.FeedBack', 'USER')}>
            <Image source={icFeedback}/>
            <Text style={styles.itemText}>PHẢN HỒI</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.wrapItem} onPress={() => this.push('app.Policy', 'USER')}>
            <Image source={persion}/>
            <Text style={styles.itemText}>CHÍNH SÁCH BÁN HÀNG</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.wrapItem} onPress={() => this._logout()}>
            <Image source={logout}/>
            <Text style={styles.itemText}>ĐĂNG XUẤT</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.wrapFooter}>
          <View style={styles.footer}>
            <Image source={icCall24Px} style={{marginRight: 10}}/>
            <Text style={styles.contact}>Tổng đài hỗ trợ: 1900 54 54 82 (nhánh 4)</Text>
          </View>
        </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    // width: '100%',
    // minHeight: screenHeight,
    backgroundColor: '#ffffff',
  },
  header: {
    flex: 1,
    height: 112,
    backgroundColor: "#007ed2",
    paddingTop: 28,
    paddingLeft: 16,
  },
  wrapUser: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  wrapUsername: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: 56,
    height: 56,
    borderRadius: 28,
  },
  username: {
    fontFamily: "SanFranciscoDisplay-Regular",
    fontSize: 16,
    fontWeight: "bold",
    fontStyle: "normal",
    lineHeight: 20,
    letterSpacing: 0,
    textAlign: "left",
    color: "#ffffff",
    marginRight: 10
  },
  userPhone: {
    fontFamily: "SanFranciscoDisplay-Regular",
    fontSize: 11,
    fontWeight: "normal",
    fontStyle: "normal",
    lineHeight: 20,
    letterSpacing: 0,
    textAlign: "left",
    color: "#d1dee9"
  },
  userInfo: {
    marginLeft: 16,
    // alignItems: 'center',
    justifyContent: 'flex-start'
  },
  wrapItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    paddingLeft: 16,
    height: 63
  },
  itemText: {
    fontFamily: "SanFranciscoDisplay-Regular",
    fontSize: 14,
    fontWeight: "bold",
    fontStyle: "normal",
    lineHeight: 48,
    letterSpacing: 0,
    textAlign: "left",
    color: "#707070",
    marginLeft: 16
  },
  contact: {
    fontFamily: "SanFranciscoDisplay-Regular",
    fontSize: 10,
    fontWeight: "normal",
    fontStyle: "normal",
    letterSpacing: 0,
    textAlign: "center",
    color: "#ababab"
  },
  wrapFooter: {
    flex: 1,
    paddingLeft: 16,
    justifyContent: 'flex-end',
  },
  footer: {
    flex: 1,
    height: 50,
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    borderTopWidth: 1, borderTopColor: '#d5d5d5',
  }
});

function mapStateToProps(state, ownProps) {
  return {
    userData: state.userReducers.userData,
    // menu: state.homeReducer.menu,
    // user: state.userReducers.user,
    // allCategories: state.homeReducer.allCategories
  }
}

function mapDispatchToProps(dispatch) {
  return {
    userActions: bindActionCreators(getUserInfo, dispatch),
    logoutAction: bindActionCreators(logoutAction, dispatch)
    // homeActions: bindActionCreators(homeActions, dispatch),
    // actions: bindActionCreators(userActions, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(MenuDrawer);