import React, { PureComponent } from "react";
import { View } from "react-native";
import { Text } from "./Text";
import _ from "lodash";
import { connect } from "react-redux";
import { getMainBrandingColourFromState, TEXT_DARK } from "../colours";
import { Spinner } from "./Spinner";
import { InlineButton } from "./InlineButton";
import { MiddlePopup } from "./MiddlePopup";
class ConfirmPopup extends PureComponent {
  render() {
    return /*#__PURE__*/React.createElement(MiddlePopup, {
      visible: this.props.visible,
      onClose: this.props.onClose,
      style: [styles.popup, this.props.headerContent && {
        paddingTop: 16
      }]
    }, this.props.headerContent && /*#__PURE__*/React.createElement(View, {
      style: {
        width: 350,
        marginBottom: 16
      }
    }, this.props.headerContent), !_.isEmpty(this.props.text) && /*#__PURE__*/React.createElement(Text, {
      style: [styles.text, this.props.textAlignLeft && styles.textAlignLeft]
    }, this.props.text), !_.isEmpty(this.props.subtext) && /*#__PURE__*/React.createElement(Text, {
      style: [styles.subtext, this.props.textAlignLeft && styles.textAlignLeft]
    }, this.props.subtext), this.props.extraContent && /*#__PURE__*/React.createElement(View, {
      style: {
        width: 350,
        marginTop: 16
      }
    }, this.props.extraContent), this.props.children, /*#__PURE__*/React.createElement(View, {
      style: [styles.buttonsContainer, this.props.verticalButtons && styles.verticalButtons]
    }, this.props.buttonsLoading && /*#__PURE__*/React.createElement(View, {
      style: styles.loadingContainer
    }, /*#__PURE__*/React.createElement(Spinner, null)), !this.props.hideNo && !this.props.buttonsLoading && /*#__PURE__*/React.createElement(InlineButton, {
      onPress: this.props.onCancel,
      color: "#fff",
      style: [styles.button, styles.noButton, this.props.verticalButtons && styles.buttonVertical, {
        borderColor: this.props.colourBrandingMain
      }],
      textStyle: {
        color: this.props.colourBrandingMain
      },
      large: true
    }, this.props.noText || "No"), !this.props.hideYes && !this.props.buttonsLoading && /*#__PURE__*/React.createElement(InlineButton, {
      onPress: this.props.onConfirm,
      color: this.props.colourBrandingMain,
      style: [styles.button, this.props.verticalButtons && styles.buttonVertical],
      large: true
    }, this.props.yesText || "Yes")));
  }
}
const styles = {
  popup: {
    padding: 24,
    margin: 16,
    maxWidth: 350
  },
  text: {
    fontFamily: "sf-bold",
    fontSize: 20,
    color: TEXT_DARK,
    textAlign: "center"
  },
  subtext: {
    fontFamily: "sf-regular",
    fontSize: 17,
    color: TEXT_DARK,
    textAlign: "center"
  },
  textAlignLeft: {
    textAlign: "left"
  },
  buttonsContainer: {
    flexDirection: "row",
    marginTop: 24
  },
  loadingContainer: {
    height: 40,
    justifyContent: "center",
    alignItems: "center"
  },
  button: {
    width: 120,
    paddingHorizontal: 2
  },
  noButton: {
    borderWidth: 1,
    marginRight: 16
  },
  buttonVertical: {
    width: "100%",
    marginTop: 16,
    marginRight: 0,
    paddingHorizontal: 8
  },
  verticalButtons: {
    flexDirection: "column-reverse"
  }
};
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state)
  };
};
const confirmPopup = connect(mapStateToProps, {})(ConfirmPopup);
export { confirmPopup as ConfirmPopup };
//# sourceMappingURL=ConfirmPopup.js.map