function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { Component } from "react";
import { Text } from "@plusscommunities/pluss-core-app/components";
import { connect } from "react-redux";
import _ from "lodash";
import { TouchableOpacity, View, ScrollView, StyleSheet } from "react-native";
import { Icon } from "@rneui/themed";
import { Services } from "../config";
import { FormCard } from "./FormCard";
import { FormCardSection } from "./FormCardSection";
import { InlineButton } from "./InlineButton";
import Header from "./Header";
import { Spinner } from "./Spinner";
import { TEXT_DARK, COLOUR_GREEN, BG_GREY, INACTIVE_BUTTON, TEXT_LIGHT, getMainBrandingColourFromState } from "../colours";
import { typeActions, profileActions } from "../apis";
class AudienceSelectorPage extends Component {
  constructor(props) {
    super(props);
    _defineProperty(this, "componentDidMount", async () => {
      try {
        this.setState({
          loading: true
        });
        await this.getUserTypes();
        await this.getUserTags();
        this.setState({
          loading: false,
          combinedList: this.getAvailableAudienceTags()
        });
      } catch (error) {
        console.error("loading types error", error);
        this.setState({
          loading: false
        });
      }
    });
    _defineProperty(this, "getUserTypes", async () => {
      const {
        data
      } = await typeActions.getUserTypes(this.props.site);
      data.forEach(e => {
        e.name = e.category ? `(${e.category[0].toUpperCase() + e.category.substring(1)}) ${e.displayName}` : e.displayName;
        e.key = e.typeName;
      });
      // console.log('getUserTypes', data);
      this.setState({
        types: data
      });
    });
    _defineProperty(this, "getUserTags", async () => {
      const {
        data
      } = await profileActions.getUserTagsBySite(this.props.site);
      data.forEach(e => {
        e.name = e.Title;
        e.key = e.Id;
      });
      // console.log('getUserTags', data);
      this.setState({
        tags: data
      });
    });
    _defineProperty(this, "getAvailableAudienceTags", () => {
      const {
        categories,
        types,
        tags
      } = this.state;
      const {
        audienceTypeSelection
      } = this.props;
      const categoryTags = categories.map(c => {
        const Id = `category_${c.key}`;
        return {
          AudienceType: "Category",
          AudienceTypeSelection: c.key,
          Id,
          Title: c.name,
          Selected: audienceTypeSelection.some(i => i.Id === Id)
        };
      });
      const userTypeTags = types.map(t => {
        const Id = `userType_${t.typeName}`;
        return {
          AudienceType: "UserType",
          AudienceTypeSelection: t.typeName,
          Id,
          Title: `User Type: ${t.displayName}`,
          Selected: audienceTypeSelection.some(i => i.Id === Id)
        };
      });
      const userTagTags = tags.map(t => {
        const Id = `userTag_${t.Id}`;
        return {
          AudienceType: "UserTags",
          AudienceTypeSelection: t.Id,
          Id,
          Title: `User Tag: ${t.Title}`,
          Selected: audienceTypeSelection.some(i => i.Id === Id)
        };
      });
      return [...categoryTags, ...userTypeTags, ...userTagTags];
    });
    _defineProperty(this, "onPressBack", () => {
      Services.navigation.goBack();
    });
    _defineProperty(this, "onSelectAll", () => {
      const newList = [...this.state.combinedList];
      newList.forEach(i => i.Selected = false);
      this.setState({
        combinedList: newList
      });
    });
    _defineProperty(this, "onSeeAll", () => {
      this.setState({
        seeAll: !this.state.seeAll
      });
    });
    _defineProperty(this, "onToggleAudienceOption", option => {
      const newList = [...this.state.combinedList];
      const selected = newList.find(i => i.Id === option.Id);
      if (selected) {
        selected.Selected = !selected.Selected;
        this.setState({
          combinedList: newList
        });
      }
    });
    _defineProperty(this, "onDone", () => {
      if (this.props.onChange) {
        const {
          combinedList
        } = this.state;
        const selected = combinedList.filter(i => i.Selected);
        if (selected && selected.length > 0) {
          this.props.onChange("Custom", selected);
        } else {
          this.props.onChange(null, null);
        }
      }
      Services.navigation.goBack();
    });
    this.state = {
      loading: false,
      categories: [{
        name: "All Primary Users",
        key: "resident"
      }, {
        name: "All Staff Users",
        key: "staff"
      }, {
        name: "All Linked Users",
        key: "family"
      }],
      types: [],
      tags: [],
      combinedList: [],
      seeAll: false
    };
  }
  renderOption(label, selected, onSelect, key = null, hasUnderline = true) {
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      key: key,
      onPress: onSelect
    }, /*#__PURE__*/React.createElement(FormCardSection, {
      hasUnderline: hasUnderline,
      hasContent: true
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.labelContainer
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.labelText
    }, label), /*#__PURE__*/React.createElement(Icon, {
      name: "check-circle",
      type: "font-awesome",
      iconStyle: [{
        color: INACTIVE_BUTTON,
        fontSize: 20
      }, selected && {
        color: COLOUR_GREEN
      }]
    }))));
  }
  renderSelectAll() {
    const {
      combinedList,
      loading
    } = this.state;
    const allSelected = !combinedList.find(i => i.Selected);
    if (loading) return null;
    return /*#__PURE__*/React.createElement(FormCard, {
      style: styles.selectAllContainer
    }, this.renderOption("All Users", allSelected, this.onSelectAll, null, false));
  }
  renderSelection() {
    const {
      loading,
      combinedList,
      seeAll
    } = this.state;
    if (loading) return null;
    const selectedText = combinedList.filter(i => i.Selected).map(i => i.Title).join(", ");
    const hasSelected = !_.isEmpty(selectedText);
    return /*#__PURE__*/React.createElement(View, {
      style: styles.selectionContainer
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.selectionContainerInner
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.selectionTitle
    }, "or select from below"), hasSelected ? /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: this.onSeeAll
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.seeAllButton
    }, seeAll ? "See less" : "See all")) : null), hasSelected ? /*#__PURE__*/React.createElement(Text, {
      style: styles.selectionText,
      numberOfLines: seeAll ? null : 1
    }, `Current selection: ${selectedText}`) : null);
  }
  renderTips() {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.tipContainer
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.tipText
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        fontFamily: "sf-semibold"
      }
    }, "Tip: "), "Group your users using User Tags from your website Community Manager"));
  }
  renderAvailableAudiences() {
    const {
      loading,
      combinedList
    } = this.state;
    return /*#__PURE__*/React.createElement(ScrollView, {
      style: styles.availableScrollContainer,
      contentContainerStyle: styles.availabelScrollContent
    }, /*#__PURE__*/React.createElement(FormCard, null, combinedList.map((option, index) => {
      const notLast = index < combinedList.length - 1;
      return this.renderOption(option.Title, option.Selected, () => this.onToggleAudienceOption(option), index, notLast);
    })), loading ? /*#__PURE__*/React.createElement(Spinner, null) : null, this.renderTips());
  }
  renderButtons() {
    const {
      loading
    } = this.state;
    return /*#__PURE__*/React.createElement(View, {
      style: styles.doneButtonContainer
    }, /*#__PURE__*/React.createElement(InlineButton, {
      color: loading ? INACTIVE_BUTTON : this.props.colourBrandingMain,
      onPress: this.onDone,
      touchableStyle: styles.doneButton,
      fillTouchable: true,
      large: true,
      disabled: loading
    }, "Done"));
  }
  render() {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.container
    }, /*#__PURE__*/React.createElement(Header, {
      leftIcon: "angle-left",
      onPressLeft: this.onPressBack,
      text: "Select Audience"
    }), this.renderSelectAll(), this.renderSelection(), this.renderAvailableAudiences(), this.renderButtons());
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: "relative",
    backgroundColor: BG_GREY
  },
  selectAllContainer: {
    marginTop: 20
  },
  selectionContainer: {
    padding: 20
  },
  selectionContainerInner: {
    flexDirection: "row",
    justifyContent: "space-between"
  },
  selectionTitle: {
    fontFamily: "sf-bold",
    fontSize: 14,
    color: TEXT_DARK
  },
  selectionText: {
    fontFamily: "sf-bold",
    fontSize: 14,
    color: TEXT_DARK,
    marginTop: 10
  },
  seeAllButton: {
    marginLeft: 10,
    fontFamily: "sf-bold",
    fontSize: 14,
    color: TEXT_LIGHT
  },
  availableScrollContainer: {
    flex: 1
  },
  availabelScrollContent: {
    flexGrow: 1,
    justifyContent: "space-between",
    flexDirection: "column"
  },
  tipContainer: {
    padding: 10
  },
  tipText: {
    fontSize: 14,
    fontFamily: "sf-regular",
    color: TEXT_DARK
  },
  labelContainer: {
    flexDirection: "row",
    justifyContent: "space-between"
  },
  labelText: {
    fontFamily: "sf-medium",
    fontSize: 16,
    color: TEXT_DARK
  },
  description: {
    marginTop: 5,
    fontSize: 14,
    fontFamily: "sf-regular",
    color: TEXT_DARK
  },
  doneButtonContainer: {
    backgroundColor: "#fff",
    marginTop: 1,
    flexDirection: "row",
    paddingTop: 10,
    paddingBottom: 20
  },
  doneButton: {
    flex: 1,
    marginHorizontal: 6
  }
});
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state)
  };
};
export default connect(mapStateToProps, {})(AudienceSelectorPage);
//# sourceMappingURL=AudienceSelectorPage.js.map