import React, { Component } from "react";
import { View, TouchableWithoutFeedback, Modal } from "react-native";
import { Text } from "./Text";
import _ from "lodash";
import { connect } from "react-redux";
import { LINEGREY, TEXT_DARK, TEXT_LIGHT, getMainBrandingColourFromState } from "../colours";
import { InlineButton } from "./InlineButton";
class Popup extends Component {
  renderOptions() {
    if (!this.props.options) {
      return null;
    }
    return /*#__PURE__*/React.createElement(View, {
      style: styles.bottom
    }, _.map(this.props.options, (option, index) => {
      return /*#__PURE__*/React.createElement(InlineButton, {
        key: index,
        onPress: option.action,
        color: "#fff",
        textStyle: [styles.optionText, {
          color: this.props.colourBrandingMain
        }, option.bold && styles.optionTextBold]
      }, option.text);
    }));
  }
  renderTitle() {
    if (!this.props.title) {
      return null;
    }
    return /*#__PURE__*/React.createElement(Text, {
      style: [styles.title, {
        color: this.props.colourBrandingMain
      }]
    }, this.props.title);
  }
  renderContent() {
    if (this.props.content) {
      return this.props.content;
    }
    if (!this.props.text) {
      return null;
    }
    return /*#__PURE__*/React.createElement(Text, {
      style: styles.text
    }, this.props.text);
  }
  render() {
    return /*#__PURE__*/React.createElement(Modal, {
      visible: true,
      transparent: true,
      animationType: "fade",
      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.props.containerStyle]
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.top
    }, this.renderTitle(), this.renderContent(), this.props.children), this.renderOptions()))));
  }
}
const styles = {
  container: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    top: 0,
    backgroundColor: "rgba(0,0,0,0.5)",
    zIndex: 1000,
    paddingHorizontal: 16,
    paddingVertical: 32,
    justifyContent: "center",
    alignItems: "center",
    width: "100%"
  },
  menu: {
    backgroundColor: "#fff",
    borderRadius: 12
  },
  top: {
    padding: 24
  },
  title: {
    fontFamily: "sf-bold",
    fontSize: 24,
    lineHeight: 24,
    color: TEXT_DARK,
    textAlign: "center",
    marginBottom: 16
  },
  text: {
    fontFamily: "sf-regular",
    fontSize: 16,
    lineHeight: 22,
    color: TEXT_LIGHT,
    textAlign: "center"
  },
  bottom: {
    borderTopColor: LINEGREY,
    borderTopWidth: 1,
    flexDirection: "row-reverse",
    padding: 8
  },
  option: {
    marginRight: 16
  },
  optionText: {
    fontFamily: "sf-regular",
    fontSize: 16
  },
  optionTextBold: {
    fontFamily: "sf-semibold"
  }
};
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state)
  };
};
const popup = connect(mapStateToProps, {})(Popup);
export { popup as Popup };
//# sourceMappingURL=Popup.js.map