import loggerCreator from "app/utils/logger";
//noinspection JSUnresolvedVariable
var moduleLogger = loggerCreator("SidebarMenuItem");

import React, { Component } from "react";
import { Image, StyleSheet, View } from "react-native";
import { observer } from "mobx-react";
import NormalText from "app/shared_components/text/normal_text";
import { colors } from "app/styles/styles";
import HoverableOpacity from "app/utils/hoverable_opacity";

const styles = StyleSheet.create({
  itemContainer: { flexDirection: "row", height: 45, alignItems: "center" },
  itemText: { marginLeft: 5, color: colors.CYAN_BRIGHT },

  leftImage: { flex: 1 },
  leftImageContainer: { marginLeft: 10, height: 25, width: 25 },

  rightImage: { flex: 1 },
  rightImageContainer: { marginLeft: "auto", marginRight: 10, height: 25, width: 25 },
});

@observer
export default class SidebarMenuItem extends Component {
  render() {
    let itemContainerBackground = "transparent";
    if (this.props.isActive) {
      itemContainerBackground = colors.CONTAINER_BACKGROUND_ACTIVE;
    }

    return (
      <HoverableOpacity
        activeOpacity={1}
        style={[styles.itemContainer, { backgroundColor: itemContainerBackground }]}
        hoverStyle={{ backgroundColor: colors.CONTAINER_BACKGROUND_HOVER }}
        onMouseEnter={this.onMouseEnter}>
        <View style={styles.leftImageContainer}>
          <Image source={this.props.leftImage} resizeMode="contain" style={styles.leftImage} />
        </View>
        <NormalText style={styles.itemText}>
          {this.props.text}
        </NormalText>
        <View style={styles.rightImageContainer}>
          <Image source={this.props.rightImage} resizeMode="contain" style={styles.rightImage} />
        </View>
      </HoverableOpacity>
    );
  }
}

SidebarMenuItem.propTypes = {
  text: React.PropTypes.string.isRequired,
  leftImage: React.PropTypes.any.isRequired,
  rightImage: React.PropTypes.any,

  isActive: React.PropTypes.bool,
};

@@ -489,16 +489,20 @@
 ainer: %7B
+%0A   
  flexDir
@@ -515,16 +515,20 @@
 : %22row%22,
+%0A   
  height:
@@ -531,16 +531,20 @@
 ght: 45,
+%0A   
  alignIt
@@ -556,16 +556,40 @@
 %22center%22
+,%0A    paddingLeft: 10,%0A 
  %7D,%0A  it
@@ -662,81 +662,79 @@
 : %7B 
-flex: 1 %7D,%0A  leftImageContainer: %7B marginLeft: 10, height: 25, width: 25 
+height: 25, width: 25, resizeMode: %22contain%22 %7D,%0A  leftImageContainer: %7B
 %7D,%0A%0A
@@ -1314,49 +1314,8 @@
 R %7D%7D
-%0A        onMouseEnter=%7Bthis.onMouseEnter%7D
 %3E%0A  
@@ -1407,37 +1407,16 @@
 ftImage%7D
- resizeMode=%22contain%22
  style=%7B

fix - sidebar icons adjusting size