import classnames from "classnames";
import lodash from "lodash";
import React, { PureComponent } from "react";
import ReactModal from "react-modal";
import { withRicosContext, withZIndexContext } from "./../../../ricos-context/index.js";
import { POLLS_VOTED_USER_ITEM } from "../../data-hooks.js";
import { withRCEHelpers } from "../rce-helpers-context/index.js";
import { VotedUsersModal } from "./voted-users-modal.js";
import styles from "./voted-users-scss.js";
import { VoterAvatar } from "./voter-avatar.js";
class VotedUsersComponent extends PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      isOpen: false,
      $container: null,
      latestVotedMembers: []
    };
    this.closeModal = () => this.setState({ isOpen: false });
    this.openModal = (e) => {
      const { showVoters, rce } = this.props;
      e.preventDefault();
      if (e.key || !showVoters || rce.preventInteraction) {
        return;
      }
      this.setState({ isOpen: !!this.props.rce.isViewMode });
    };
  }
  async getSiteMember(id) {
    const siteMembers = await this.props.rce.getSiteMembers?.([id]) || [];
    return siteMembers.find((siteMember) => siteMember.siteMemberId === id);
  }
  componentDidMount() {
    this.fetchLastVotedMembers();
  }
  componentDidUpdate(prevProps) {
    if (lodash.isEqual(prevProps.option.latestVoters, this.props.option.latestVoters)) {
      return;
    }
    this.fetchLastVotedMembers();
  }
  fetchLastVotedMembers() {
    const { rce, option, showVoters } = this.props;
    if (!showVoters || !rce.getSiteMembers || !option.latestVoters || !option.latestVoters.length) {
      return Promise.resolve();
    }
    return rce.getSiteMembers(option.latestVoters).then((siteMembers) => {
      this.setState({ latestVotedMembers: siteMembers });
    }).catch((e) => {
      console.error("Failed to fetch site members", option.latestVoters, e);
    });
  }
  renderMember(member) {
    if (!member) {
      return null;
    }
    return /* @__PURE__ */ React.createElement("li", { key: member.siteMemberId, className: styles.avatar }, /* @__PURE__ */ React.createElement(
      VoterAvatar,
      {
        className: styles.avatar,
        member,
        src: member.imageUrl,
        size: {
          width: 20,
          height: 20
        }
      }
    ));
  }
  render() {
    const { option, t, showResults, showVotes, showVoters, fetchVoters, rce, isMobile } = this.props;
    const { isOpen, $container } = this.state;
    if (!showResults || !showVotes || !option.count) {
      return null;
    }
    const zIndex = this.props.zIndexService.getZIndex(isMobile ? "DRAWER" : "DIALOG");
    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
      "div",
      {
        className: classnames(styles.container, {
          [styles.cta]: showVoters && option.latestVoters?.length,
          [styles.webview]: rce.isWebView
        }),
        ref: ($container2) => this.setState({ $container: $container2 }),
        onClick: this.openModal,
        onKeyPress: this.openModal,
        role: "button",
        "aria-haspopup": "dialog",
        tabIndex: 0
      },
      /* @__PURE__ */ React.createElement("ul", { className: styles.avatar_list }, this.state.latestVotedMembers.map(this.renderMember)),
      /* @__PURE__ */ React.createElement("span", { "data-hook": POLLS_VOTED_USER_ITEM }, t("Poll_Viewer_VoteCount", { number: option.count || 0 }))
    ), $container && option.latestVoters?.length ? /* @__PURE__ */ React.createElement(
      ReactModal,
      {
        isOpen,
        onRequestClose: this.closeModal,
        parentSelector: () => document.body,
        className: classnames(styles.modal),
        overlayClassName: classnames(styles.overlay),
        style: { overlay: { zIndex } }
      },
      /* @__PURE__ */ React.createElement(
        VotedUsersModal,
        {
          option,
          fetchVoters,
          onRequestClose: this.closeModal
        }
      )
    ) : null);
  }
}
const VotedUsers = withRicosContext(withZIndexContext(withRCEHelpers(VotedUsersComponent)));
export {
  VotedUsers
};
//# sourceMappingURL=voted-users.js.map
