import React, { PureComponent } from "react";
import { View, ScrollView, StyleSheet } from "react-native";
import { Text } from "./Text";
import _ from "lodash";
import { TEXT_BLUEGREY } from "../colours";
class EmptyStateMain extends PureComponent {
  renderPlaceHolder(index, opacity = 1) {
    const barCount = _.isUndefined(this.props.barCount) ? 3 : this.props.barCount;
    if (barCount <= index) {
      return null;
    }
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.item, {
        opacity
      }]
    });
  }
  render() {
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.container, this.props.style]
    }, !this.props.hideTitle && /*#__PURE__*/React.createElement(Text, {
      style: styles.titleText
    }, this.props.title || "Nothing to see here"), this.props.content, /*#__PURE__*/React.createElement(ScrollView, {
      style: styles.itemContainer
    }, this.renderPlaceHolder(0, 0.8), this.renderPlaceHolder(1, 0.6), this.renderPlaceHolder(2, 0.4)));
  }
}
const styles = StyleSheet.create({
  container: {
    borderRadius: 5,
    paddingVertical: 5
  },
  titleText: {
    fontFamily: "qs-bold",
    fontSize: 16,
    color: TEXT_BLUEGREY
  },
  itemContainer: {
    marginTop: 20,
    flexDirection: "column"
  },
  item: {
    borderRadius: 4,
    width: "100%",
    height: 32,
    backgroundColor: "#e6ebef",
    marginBottom: 17
  }
});
export default EmptyStateMain;
//# sourceMappingURL=EmptyStateMain.js.map