import React from "react";
import { Container, Content, Text, List, ListItem, View } from "native-base";
import { printData, connectPrinter } from "../../common/EscPosPrint.js";

import { StyleSheet, Image } from "react-native";
import Images from "../../../assets/images";
import { Col, Grid } from "react-native-easy-grid";
import { connect } from "react-redux";
import { toggleCart, dispatchOnly } from "../../actions/action.js";

/**
 * Modified by MaRoCa on 01/27/2020.
 */

let routes = [];
const SIDEBAR_MY_ORDERS = "My Orders";
const SIDEBAR_FAVORITES = "Favorites";
const SIDEBAR_UMONEY = "U-Money";
const SIDEBAR_LOG_OUT = "Log Out";
class SideBarScreen extends React.Component {
  // connect = async () => {
  //   const is_printer_connected = await connectPrinter();
  // };

  onClickMenu = object => {
    switch (object.text) {
      case SIDEBAR_MY_ORDERS: {
        this.props.toggleCart({
          reducer_type: "ISVISIBLE_CART"
        });
        this.props.navigation.closeDrawer();
        break;
      }

      case SIDEBAR_LOG_OUT: {
        this.props.navigation.navigate("Home", {
          isLogout: true
        });
        this.props.dispatchOnly(
          { reducer_type: "CLEAR_CART" },
          { reducer_type: "CLEAR_CUSTOMER" }
        );
        this.props.navigation.closeDrawer();
        break;
      }

      default: {
        this.props.navigation.navigate(object.route, {
          title: object.text
        });
        this.props.navigation.closeDrawer();
        break;
      }
    }
  };

  iconLoad = object => {
    if (object.img) {
      return (
        <Image
          source={object.img}
          style={{
            width: 30,
            height: 30
          }}
        />
      );
    } else {
      const xmoney = parseInt(
        this.props.customer.xmoney_balance
      ).toLocaleString();

      return (
        <View>
          <Text style={styles.fontColor}>&#x20B1;{xmoney}</Text>
        </View>
      );
    }
  };

  render() {
    const customerInfo = this.props.customer;

    if (customerInfo.customer_name !== "Unilever Guest" || customerInfo == {}) {
      routes = [
        { text: SIDEBAR_MY_ORDERS, img: Images.icMyOrders, route: "" },
        {
          text: SIDEBAR_FAVORITES,
          img: Images.icFavorites,
          route: "Favorites"
        },
        {
          text: SIDEBAR_UMONEY,
          money: "" + customerInfo.xmoney_balance,
          route: ""
        },
        { text: SIDEBAR_LOG_OUT, img: Images.icLogOut, route: "Home" }
      ];
    } else {
      routes = [
        { text: SIDEBAR_MY_ORDERS, img: Images.icMyOrders, route: "Cartlist" },
        { text: SIDEBAR_LOG_OUT, img: Images.icLogOut, route: "HomeScreen" }
      ];
    }

    return (
      <Container>
        <Content>
          <List>
            <ListItem>
              <View style={{ height: 40 }}>
                <Text
                  style={[
                    styles.fontColor,
                    { fontWeight: "bold", fontSize: 18 }
                  ]}
                >
                  {customerInfo.customer_name ? customerInfo.customer_name : ""}
                </Text>
              </View>
            </ListItem>
          </List>
          <List
            dataArray={routes}
            renderRow={object => {
              return (
                <ListItem button onPress={() => this.onClickMenu(object)}>
                  <Grid style={{ alignItems: "center" }}>
                    <Col>
                      <Text
                        style={[
                          styles.fontColor,
                          {
                            textAlign: "left",
                            alignSelf: "stretch"
                          }
                        ]}
                      >
                        {object.text}
                      </Text>
                    </Col>
                    <Col
                      style={{
                        alignItems: "flex-end",
                        justifyContent: "center"
                      }}
                    >
                      {this.iconLoad(object)}
                    </Col>
                  </Grid>
                </ListItem>
              );
            }}
          ></List>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  fontColor: { color: "#127ebd" }
});

const mapStateToProps = state => {
  let customer = state.customer.return ? state.customer.return[0] : {};
  return {
    customer
  };
};

const mapDispatchToProps = dispatch => {
  return {
    toggleCart: () => {
      dispatch(toggleCart());
    },
    dispatchOnly: param => {
      dispatch(dispatchOnly(param));
    }
  };
};

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