import React, { Component } from "react";
import { Text } from "@plusscommunities/pluss-core-app/components";
import { View, Dimensions, Modal, ScrollView, TouchableWithoutFeedback, Platform } from "react-native";
import { connect } from "react-redux";
import { TEXT_DARK, LINEGREY, getMainBrandingColourFromState } from "../colours";
import UserListing from "./UserListing";
import { InlineButton } from "./InlineButton";
const SCREEN_HEIGHT = Dimensions.get("window").height;
class UserListPopup extends Component {
  getRenderKey(user, userKey) {
    if (user.id) {
      return `${user.id}${userKey}`;
    }
    if (user.userId) {
      return `${user.userId}${userKey}`;
    }
    return userKey;
  }
  renderHeader() {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.titleContainer
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.titleContent
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.title
    }, this.props.title)));
  }
  renderScrollContainer() {
    return /*#__PURE__*/React.createElement(ScrollView, {
      style: styles.optionsContainer,
      keyboardShouldPersistTaps: "handled"
    }, this.props.users.map((user, userIndex) => {
      return /*#__PURE__*/React.createElement(UserListing, {
        user: user,
        key: this.getRenderKey(user, userIndex),
        index: userIndex
      });
    }), /*#__PURE__*/React.createElement(View, {
      style: styles.scrollFooterSpace
    }));
  }
  renderFooter() {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.footer
    }, /*#__PURE__*/React.createElement(InlineButton, {
      onPress: this.props.onClose.bind(this),
      color: this.props.colourBrandingMain,
      style: [styles.footerButton]
    }, "Done"));
  }
  render() {
    return /*#__PURE__*/React.createElement(Modal, {
      visible: this.props.visible,
      transparent: true,
      animationType: "slide",
      onRequestClose: this.props.onClose
    }, /*#__PURE__*/React.createElement(ScrollView, {
      keyboardShouldPersistTaps: "always"
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.popup
    }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
      onPress: this.props.onClose
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.popupOverlay
    })), /*#__PURE__*/React.createElement(View, {
      style: [styles.popupContent, {
        minHeight: SCREEN_HEIGHT - (Platform.OS === "android" ? 175 : 150)
      }, {
        marginTop: 60,
        minHeight: SCREEN_HEIGHT - (Platform.OS === "android" ? 85 : 60)
      }]
    }, this.renderHeader(), this.renderScrollContainer(), this.renderFooter()))));
  }
}
const styles = {
  popup: {
    flex: 1,
    justifyContent: "center"
  },
  popupOverlay: {
    position: "absolute",
    backgroundColor: "rgba(19, 19, 26, .25)",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  popupContent: {
    borderRadius: 3,
    marginTop: 150,
    backgroundColor: "#fff",
    flex: 1,
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15
  },
  footer: {
    padding: 8,
    borderTopWidth: 1,
    borderColor: LINEGREY,
    backgroundColor: "#fff"
  },
  footerButton: {
    width: "100%",
    height: 40
  },
  titleContainer: {
    alignSelf: "stretch",
    padding: 24,
    paddingTop: 16,
    paddingBottom: 0
  },
  titleContent: {
    borderColor: LINEGREY,
    borderBottomWidth: 1,
    flexDirection: "row",
    justifyContent: "space-between",
    paddingBottom: 15
  },
  title: {
    fontSize: 15,
    fontFamily: "sf-semibold",
    color: TEXT_DARK
  },
  optionsContainer: {
    flex: 1,
    paddingVertical: 8
  }
};
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state)
  };
};
const userListPopup = connect(mapStateToProps, {})(UserListPopup);
export { userListPopup as UserListPopup };
//# sourceMappingURL=UserListPopup.js.map