import React, { Component } from "react";
import { Text } from "@plusscommunities/pluss-core-app/components";
import { Animated, View, StatusBar, Image, Dimensions, TouchableOpacity, Platform } from "react-native";
import { Icon } from "@rneui/themed";
import { LinearGradient } from "expo-linear-gradient";
import { connect } from "react-redux";
// import {
//   StatusBarHeight,
//   COLOUR_TRANSPARENT,
//   TEXT_DARK,
//   TEXT_LIGHT,
//   LINEGREY,
//   COLOUR_GREEN,
//   getMainBrandingColourFromState,
//   hexToRGBAstring,
//   getSiteSettingFromState,
// } from '../../js';
import { StatusBarHeight, getSiteSettingFromState } from "../helper";
import { COLOUR_TRANSPARENT, TEXT_DARK, TEXT_LIGHT, LINEGREY, COLOUR_GREEN, getMainBrandingColourFromState, hexToRGBAstring } from "../colours";
import { FontAwesome } from "./Icon";
import Config from "../config";
// import { HAS_GRADIENT_HEADER } from '../../config';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  UNSAFE_componentWillMount() {
    let barStyle = Platform.select({
      ios: "dark-content",
      android: "default"
    });
    if (this.props.barStyle) {
      barStyle = this.props.barStyle;
    } else if (this.props.headerType !== "white" && !this.props.noGradient && !this.props.transparent) {
      barStyle = "light-content";
    }
    this.setState({
      windowWidth: Dimensions.get("window").width,
      barStyle
    });
  }
  getTextColourStyle() {
    if (this.props.textColour) {
      return {
        color: this.props.textColour
      };
    }
    if (this.props.headerType !== "white" && !this.props.noGradient && !this.props.transparent) {
      return {
        color: "#fff"
      };
    }
    return null;
  }
  renderBackground() {
    if (this.props.headerBackground) return this.props.headerBackground;
    if (this.props.headerImage) {
      return /*#__PURE__*/React.createElement(Image, {
        style: [styles.thumbnailStyle, {
          width: this.state.windowWidth
        }],
        source: {
          uri: this.props.headerImage
        }
      });
    }
    if (this.props.headerType === "pattern" && !this.props.noGradient && !this.props.transparent) {
      return /*#__PURE__*/React.createElement(View, {
        style: [styles.thumbnailStyle, this.props.contentContainerStyle, {
          backgroundColor: this.props.colourBrandingMain,
          width: this.state.windowWidth
        }, this.props.popupHeader && styles.thumbnailPopupHeader]
      }, /*#__PURE__*/React.createElement(Image, {
        style: [styles.headerPattern, this.props.patternColour && {
          tintColor: this.props.patternColour
        }],
        source: {
          uri: this.props.headerPattern
        }
      }));
    }
    if (this.props.headerType === "block" && !this.props.noGradient && !this.props.transparent) {
      return /*#__PURE__*/React.createElement(View, {
        style: [styles.thumbnailStyle, this.props.contentContainerStyle, {
          backgroundColor: this.props.colourBrandingMain,
          width: this.state.windowWidth
        }, this.props.popupHeader && styles.thumbnailPopupHeader]
      });
    }
    if (this.props.headerType === "gradient" && !this.props.noGradient && !this.props.transparent) {
      return /*#__PURE__*/React.createElement(View, {
        style: [styles.thumbnailStyle, this.props.contentContainerStyle, {
          width: this.state.windowWidth
        }, this.props.popupHeader && styles.thumbnailPopupHeader]
      }, /*#__PURE__*/React.createElement(LinearGradient, {
        style: {
          flex: 1
        },
        colors: [this.props.colourBrandingMain, hexToRGBAstring(this.props.colourBrandingMain, 0.7)],
        start: {
          x: 0,
          y: 0
        },
        end: {
          x: 1,
          y: 1
        },
        locations: [0.4, 1]
      }));
    }
    return null;
  }
  renderLeftBubble() {
    if (!this.props.hasLeftBubble) {
      return null;
    }
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.counter, styles.smallCounter]
    });
  }
  renderLeftIcon() {
    if (!this.props.leftIcon && !this.props.leftText || !this.props.onPressLeft) {
      return null;
    }
    if (this.props.leftText) {
      return /*#__PURE__*/React.createElement(View, {
        style: [styles.headerContentIcon, {
          width: "auto"
        }]
      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
        onPress: this.props.onPressLeft,
        activeOpacity: 0.6
      }, /*#__PURE__*/React.createElement(Text, {
        style: [styles.buttonText, {
          paddingRight: 5,
          paddingLeft: 15,
          color: this.props.colourBrandingMain
        }, this.props.leftTextStyle, this.props.headerType !== "white" && !this.props.noGradient && !this.props.transparent && {
          color: "#fff"
        }]
      }, this.props.leftText)));
    }
    if (this.props.leftIconType && this.props.leftIconType === "pluss") {
      return /*#__PURE__*/React.createElement(View, {
        style: styles.headerContentIcon
      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
        onPress: this.props.onPressLeft,
        activeOpacity: 0.6
      }, /*#__PURE__*/React.createElement(View, {
        style: styles.headerContentIcon
      }, /*#__PURE__*/React.createElement(FontAwesome, {
        name: this.props.leftIcon,
        style: [styles.leftIcon, this.props.leftIconStyle, this.getTextColourStyle()]
      }), this.renderLeftBubble())));
    }
    return /*#__PURE__*/React.createElement(View, {
      style: styles.headerContentIcon
    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: this.props.onPressLeft,
      activeOpacity: 0.6
    }, /*#__PURE__*/React.createElement(Icon, {
      name: this.props.leftIcon,
      style: styles.headerContentIcon,
      type: "font-awesome",
      iconStyle: [styles.leftIcon, this.props.leftIconStyle, this.getTextColourStyle()]
    }), this.renderLeftBubble()));
  }
  renderHeaderText() {
    if (!this.props.text) {
      if (this.props.centerContent) {
        return this.props.centerContent;
      }
      return null;
    }
    if (this.props.onTextPress) {
      return /*#__PURE__*/React.createElement(TouchableOpacity, {
        onPress: this.props.onTextPress,
        activeOpacity: 0.6,
        style: [styles.headerTextContainer, this.props.leftIcon && (!this.props.rightIcon && !this.props.rightText || this.props.absoluteRight) && {
          paddingRight: 55
        }, this.props.textContainerStyle]
      }, /*#__PURE__*/React.createElement(Text, {
        style: [styles.headerText, this.props.textStyle, this.getTextColourStyle()],
        numberOfLines: 1,
        ellipsizeMode: "tail"
      }, this.props.text));
    }
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.headerTextContainer, this.props.leftIcon && (!this.props.rightIcon && !this.props.rightText || this.props.absoluteRight) && {
        paddingRight: 55
      }, this.props.rightIcon && (!this.props.leftIcon && !this.props.leftText || this.props.absoluteLeft) && {
        paddingLeft: 55
      }, this.props.textContainerStyle]
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.headerText, this.props.textStyle, this.getTextColourStyle()],
      numberOfLines: 1,
      ellipsizeMode: "tail"
    }, this.props.text));
  }
  renderRightIcon() {
    if (this.props.rightContent) {
      return this.props.rightContent;
    }
    if (!this.props.onPressRight) {
      return null;
    }
    if (this.props.rightText && this.props.onPressRight) {
      return /*#__PURE__*/React.createElement(View, {
        style: [styles.headerContentIcon, {
          width: "auto"
        }, this.props.absoluteRight && styles.absoluteRight, this.props.rightContainerStyle]
      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
        onPress: this.props.onPressRight,
        activeOpacity: 0.6
      }, /*#__PURE__*/React.createElement(Text, {
        style: [styles.buttonText, {
          paddingRight: 15,
          paddingLeft: 5,
          textAlign: "right",
          fontFamily: "sf-semibold",
          color: this.props.colourBrandingMain
        }, this.getTextColourStyle(), this.props.optionalRightStyle]
      }, this.props.rightText)));
    }
    if (!this.props.rightIcon) {
      if (this.props.rightImage) {
        return /*#__PURE__*/React.createElement(TouchableOpacity, {
          onPress: this.props.onPressRight,
          activeOpacity: 0.6
        }, /*#__PURE__*/React.createElement(View, {
          style: styles.headerContentIcon
        }, /*#__PURE__*/React.createElement(Image, {
          source: {
            uri: this.props.rightImage
          },
          style: styles.rightImage,
          resizeMode: "contain"
        })));
      }
      return null;
    }
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: this.props.onPressRight,
      activeOpacity: 0.6
    }, this.props.rightIconType && this.props.rightIconType === "pluss" ? /*#__PURE__*/React.createElement(View, {
      style: styles.headerContentIcon
    }, /*#__PURE__*/React.createElement(FontAwesome, {
      name: this.props.rightIcon,
      style: [styles.rightIcon, this.getTextColourStyle(), this.props.rightIconStyle]
    })) : /*#__PURE__*/React.createElement(Icon, {
      name: this.props.rightIcon,
      style: styles.headerContentIcon,
      type: this.props.rightIconType ? this.props.rightIconType : "font-awesome",
      iconStyle: [styles.rightIcon, this.getTextColourStyle(), this.props.rightIconStyle]
    }));
  }
  render() {
    if (this.props.animatedHeader) {
      return /*#__PURE__*/React.createElement(Animated.View, {
        style: [styles.container, !this.props.noShadow && styles.containerShadow, this.props.transparent && styles.transparentContainer, this.props.style, {
          backgroundColor: this.props.headerColourOffset,
          elevation: this.props.headerElev,
          shadowColor: this.props.headerShadow
        }]
      }, this.renderBackground(), /*#__PURE__*/React.createElement(StatusBar, {
        barStyle: this.state.barStyle,
        translucent: true
      }), /*#__PURE__*/React.createElement(View, {
        style: styles.headerContent
      }, this.renderLeftIcon(), this.renderHeaderText(), this.renderRightIcon(), this.props.children), this.props.extraHeaderContent);
    }
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.container, !this.props.noShadow && styles.containerShadow, this.props.transparent && styles.transparentContainer, this.props.lineSeparated && styles.lineSeparated, this.props.popupHeader && styles.popupHeader, this.props.style, this.props.colourBrandingHeader && {
        backgroundColor: this.props.colourBrandingHeader
      }]
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.contentContainer, this.props.popupHeader && styles.popupContentContainer, this.props.contentContainerStyle, this.props.colourBrandingHeader && {
        backgroundColor: this.props.colourBrandingHeader
      }]
    }, this.renderBackground(), /*#__PURE__*/React.createElement(StatusBar, {
      barStyle: this.state.barStyle,
      translucent: true
    }), /*#__PURE__*/React.createElement(View, {
      style: [styles.headerContent, this.props.popupHeader && styles.headerContentPopup]
    }, this.renderLeftIcon(), this.renderHeaderText(), this.renderRightIcon(), this.props.children)), this.props.extraHeaderContent);
  }
}
const styles = {
  container: {
    alignSelf: "stretch",
    backgroundColor: "#fff",
    zIndex: 10
  },
  containerShadow: {
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1
    },
    shadowOpacity: 0.1,
    shadowRadius: 6,
    elevation: 3
  },
  lineSeparated: {
    borderBottomWidth: 1,
    borderColor: LINEGREY,
    shadowOpacity: 0,
    elevation: 0
  },
  popupHeader: {
    borderBottomWidth: 1,
    borderColor: LINEGREY,
    shadowOpacity: 0,
    elevation: 0,
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12
  },
  contentContainer: {
    height: StatusBarHeight(70),
    alignSelf: "stretch",
    flexDirection: "row"
  },
  popupContentContainer: {
    height: 70,
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12
  },
  transparentContainer: {
    backgroundColor: COLOUR_TRANSPARENT,
    shadowColor: COLOUR_TRANSPARENT,
    elevation: 0
  },
  thumbnailStyle: {
    height: StatusBarHeight(70),
    width: null,
    position: "absolute",
    top: 0,
    left: 0,
    resizeMode: "cover"
  },
  thumbnailPopupHeader: {
    height: 70,
    width: "100%",
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
    overflow: "hidden"
  },
  headerContent: {
    alignSelf: "stretch",
    flexDirection: "row",
    flex: 1,
    paddingTop: StatusBarHeight(0)
  },
  headerContentPopup: {
    paddingTop: 0
  },
  headerContentIcon: {
    height: 70,
    width: 55,
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between"
  },
  absoluteRight: {
    height: 70,
    justifyContent: "center",
    position: "absolute",
    right: 0,
    top: StatusBarHeight(0)
  },
  leftIcon: {
    fontSize: 25,
    padding: 15,
    width: 55,
    textAlign: "center",
    color: TEXT_LIGHT
  },
  headerTextContainer: {
    height: 70,
    flex: 1,
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between"
  },
  headerText: {
    fontSize: 16,
    flex: 1,
    fontFamily: "sf-semibold",
    color: TEXT_DARK,
    textAlign: "center",
    backgroundColor: "rgba(255,255,255,0)"
  },
  buttonText: {
    fontSize: 15,
    fontFamily: "sf-regular",
    width: 80,
    backgroundColor: "rgba(255,255,255,0)"
  },
  rightIcon: {
    fontSize: 25,
    padding: 15,
    width: 55,
    textAlign: "center",
    color: TEXT_LIGHT
  },
  rightImage: {
    width: 24,
    height: 24,
    marginRight: 15,
    marginLeft: 13
  },
  counter: {
    top: 15,
    right: 5,
    borderRadius: 10,
    position: "absolute",
    height: 20,
    minWidth: 20,
    backgroundColor: COLOUR_GREEN,
    justifyContent: "center"
  },
  counterText: {
    color: "#fff",
    textAlign: "center",
    fontFamily: "sf-bold",
    fontSize: 10,
    lineHeight: 12,
    backgroundColor: "transparent"
  },
  smallCounter: {
    width: 5,
    height: 5,
    minWidth: 5,
    top: 20,
    right: 10
  },
  headerPattern: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: "100%",
    height: "100%",
    resizeMode: "cover"
  }
};
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state),
    headerType: getSiteSettingFromState(state, "HeaderType", getSiteSettingFromState(state, "UseGradientHeader", Config.env.hasGradientHeader) ? "gradient" : "white"),
    headerPattern: getSiteSettingFromState(state, "HeaderPattern"),
    patternColour: getSiteSettingFromState(state, "PatternColour")
  };
};
export default connect(mapStateToProps, {})(Header);
//# sourceMappingURL=Header.js.map