import React, { Component } from "react";
import { Text } from "@plusscommunities/pluss-core-app/components";
import { View, TouchableWithoutFeedback, TouchableOpacity, Modal } from "react-native";
import { connect } from "react-redux";
import _ from "lodash";
import { getMainBrandingColourFromState, LINEGREY, TEXT_DARK } from "../colours";
class PopupMenu extends Component {
  renderOption(item, index) {
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      key: index,
      onPress: item.onPress
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.option, index === 0 && styles.firstOption]
    }, _.isEmpty(item.text) && item.content ? item.content : /*#__PURE__*/React.createElement(Text, {
      style: styles.optionText
    }, item.text)));
  }
  renderOptions() {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.optionsContainer
    }, _.map(this.props.options, (item, index) => {
      return this.renderOption(item, index);
    }));
  }
  renderTitle() {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.titleContainer
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.titleText
    }, this.props.title));
  }
  renderCancel() {
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: this.props.onClose
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.option, styles.cancelOption]
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.optionText, styles.cancelText, {
        color: this.props.colourBrandingMain
      }]
    }, this.props.cancelText)));
  }
  render() {
    return /*#__PURE__*/React.createElement(Modal, {
      visible: true,
      transparent: true,
      animationType: "slide",
      onRequestClose: this.props.onClose
    }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
      style: styles.container,
      onPress: this.props.onClose
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.container
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.menu
    }, this.renderTitle(), this.renderOptions(), this.renderCancel()))));
  }
}
const styles = {
  container: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    top: 0,
    backgroundColor: "rgba(0,0,0,0.5)",
    zIndex: 1000
  },
  menu: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: "#fff",
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12
  },
  optionsContainer: {
    paddingHorizontal: 16
  },
  option: {
    paddingVertical: 16,
    borderColor: LINEGREY,
    borderTopWidth: 1
  },
  cancelOption: {
    paddingHorizontal: 16
  },
  firstOption: {
    borderTopWidth: 0
  },
  optionText: {
    fontFamily: "sf-regular",
    fontSize: 16,
    textAlign: "center",
    color: TEXT_DARK
  },
  cancelText: {
    fontFamily: "sf-medium"
  },
  titleContainer: {
    padding: 16,
    borderColor: LINEGREY,
    borderBottomWidth: 1
  },
  titleText: {
    fontFamily: "sf-semibold",
    fontSize: 16,
    textAlign: "center",
    color: TEXT_DARK
  }
};
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state)
  };
};
const popupMenu = connect(mapStateToProps, {})(PopupMenu);
export { popupMenu as PopupMenu };
//# sourceMappingURL=PopupMenu.js.map