import React, { Component } from "react";
import _ from "lodash";
import { TouchableOpacity, View, ScrollView } from "react-native";
import { Text } from "./Text";
import { connect } from "react-redux";
import { TEXT_LIGHT, COLOUR_GREEN, getMainBrandingColourFromState } from "../colours";
import { getSiteSettingFromState } from "../helper";
// import { HAS_GRADIENT_HEADER } from '../../config';
import Config from "../config";
class CategoryTabs extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categoryKeys: [],
      selectedCategory: this.props.initialCategory
    };
  }
  UNSAFE_componentWillMount() {
    this.setState({
      selectedCategory: !_.isUndefined(this.props.currentTab) && !_.isEmpty(this.props.currentTab) ? this.props.currentTab : this.props.initialCategory,
      categoryKeys: this.props.categoryKeys
    });
  }
  componentDidMount() {
    this.setState({
      selectedCategory: !_.isUndefined(this.props.currentTab) && !_.isEmpty(this.props.currentTab) ? this.props.currentTab : this.props.initialCategory
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!_.isUndefined(nextProps.currentTab) && !_.isEmpty(nextProps.currentTab)) {
      this.setState({
        selectedCategory: nextProps.currentTab
      });
    }
  }
  selectCategory(key) {
    this.setState({
      selectedCategory: key
    });
    this.props.onSelect(key);
  }
  renderCounter(key) {
    if (this.props.categoryCounter && this.props.categoryCounter[key] && this.props.categoryCounter[key] === true && this.props.counterValues && this.props.counterValues[key] > 0) {
      return /*#__PURE__*/React.createElement(View, {
        style: styles.counter
      }, /*#__PURE__*/React.createElement(Text, {
        style: styles.counterText
      }, this.props.counterValues[key]));
    }
    return null;
  }
  renderCategories(noScrollStyle) {
    const getTextColour = key => {
      if (this.state.selectedCategory === key) {
        return this.props.headerType !== "white" ? "#fff" : this.props.colourBrandingMain;
      }
      return this.props.headerType !== "white" ? "#fff" : TEXT_LIGHT;
    };
    const getBottomBorderColour = key => {
      if (this.state.selectedCategory === key) {
        return this.props.headerType !== "white" ? "#fff" : this.props.colourBrandingMain;
      }
      return this.props.headerType !== "white" ? this.props.colourBrandingMain : "#fff";
    };
    return this.state.categoryKeys.map((key, index) => {
      return /*#__PURE__*/React.createElement(TouchableOpacity, {
        key: index
        // style={[{ minHeight: this.props.height || 30, justifyContent: 'center' }, noScrollStyle && { flex: 1 }]}
        ,
        style: [{
          flex: 1,
          minHeight: this.props.height || 30,
          justifyContent: "center"
        }, this.props.catWrapperStyle],
        onPress: this.selectCategory.bind(this, key)
      }, /*#__PURE__*/React.createElement(View, {
        style: [{
          borderBottomColor: getBottomBorderColour(key),
          borderBottomWidth: noScrollStyle ? 0 : 2,
          marginRight: noScrollStyle ? 0 : 16,
          marginLeft: index === 0 && !noScrollStyle ? 16 : 0,
          justifyContent: "center",
          alignContent: "center",
          minHeight: 30,
          flexDirection: "row",
          backgroundColor: this.props.headerType !== "white" ? this.props.colourBrandingMain : undefined
        }, this.props.style]
      }, /*#__PURE__*/React.createElement(View, {
        style: [noScrollStyle && styles.innerContainer, {
          flex: 1,
          borderColor: getBottomBorderColour(key),
          justifyContent: "center"
        }, this.props.catStyle]
      }, /*#__PURE__*/React.createElement(Text, {
        style: [{
          fontFamily: "sf-semibold",
          fontSize: 15,
          color: getTextColour(key),
          textAlign: "center",
          paddingVertical: 8,
          width: "auto"
        }, this.props.textStyle, this.props.colourBrandingHeader && this.state.selectedCategory !== key && {
          color: this.props.colourBrandingMain,
          opacity: 0.5
        }]
      }, key), this.renderCounter(key))));
    });
  }
  render() {
    if (this.props.noScroll) {
      // return (<View style={{ flexDirection: 'row', paddingLeft: 16, paddingRight: 16 }}>
      return /*#__PURE__*/React.createElement(View, {
        style: {
          flexDirection: "row",
          justifyContent: "space-evenly"
        }
      }, this.renderCategories(true));
    }
    return /*#__PURE__*/React.createElement(ScrollView, {
      horizontal: true
    }, this.renderCategories(false));
  }
}
const styles = {
  counter: {
    backgroundColor: COLOUR_GREEN,
    height: 16,
    minWidth: 16,
    borderRadius: 8,
    marginLeft: 4,
    marginTop: 4,
    justifyContent: "center",
    alignContent: "center"
  },
  counterText: {
    color: "#fff",
    textAlign: "center",
    fontSize: 12,
    fontFamily: "sf-semibold"
  },
  innerContainer: {
    borderBottomWidth: 2,
    flexDirection: "row",
    paddingHorizontal: 8
  }
};
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state),
    headerType: getSiteSettingFromState(state, "HeaderType", getSiteSettingFromState(state, "UseGradientHeader", Config.env.hasGradientHeader) ? "gradient" : "white")
  };
};
const categoryTabs = connect(mapStateToProps, {})(CategoryTabs);
export { categoryTabs as CategoryTabs };
//# sourceMappingURL=CategoryTabs.js.map