import {
  Box,
  Divider,
  FormField,
  InfoIcon,
  RadioGroup as RadioGroupBase,
  Text
} from "@wix/design-system";
import React, { useContext } from "react";
import { RicosContext, ZIndexContext } from "./../../../ricos-context/index.js";
import {
  PollData_Poll_Settings_Permissions_ViewRole,
  PollData_Poll_Settings_Permissions_VoteRole
} from "./../../../ricos-schema/next-schema/index.js";
import { logInvariant } from "./../../../_shared/log-invariant.js";
import { useNodeAttrs } from "./../../../_shared/use-node-attrs.js";
import { ToggleButton, usePanelContainerElement } from "./../../../ui-components/index.js";
import {
  GENERAL_SETTINGS_EACH_PERSON_VOTE_TOGGLE,
  GENERAL_SETTINGS_MULTIPLE_ANSWERS_TOGGLE,
  GENERAL_SETTINGS_VIEW_PERMISSIONS_RADIO_GROUP,
  GENERAL_SETTINGS_VOTE_COUNT_TOGGLE,
  GENERAL_SETTINGS_VOTE_PERMISSIONS_RADIO_GROUP
} from "../../data-hooks.js";
import { Section } from "./section.js";
const PollSettingsSection = ({
  nodeId,
  config,
  logBi
}) => {
  const { t } = useContext(RicosContext);
  const { pmNodeAttrs, patchPmNodeAttrs } = useNodeAttrs(nodeId, "POLL");
  if (!pmNodeAttrs) {
    logInvariant(Error("Poll settings: node attrs not found"));
    return null;
  }
  const updatePermissions = (permissions) => {
    patchPmNodeAttrs({
      poll: {
        options: [],
        ...pmNodeAttrs.poll,
        settings: {
          ...pmNodeAttrs.poll?.settings,
          permissions: {
            ...pmNodeAttrs.poll?.settings?.permissions,
            ...permissions
          }
        }
      }
    });
  };
  const updateSettings = (settings) => {
    patchPmNodeAttrs({
      poll: {
        options: [],
        ...pmNodeAttrs.poll,
        settings: {
          ...pmNodeAttrs?.poll?.settings,
          ...settings
        }
      }
    });
  };
  const pollPermissions = pmNodeAttrs.poll?.settings?.permissions;
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, { title: t("Poll_PollSettings_Tab_Settings_Section_Voting_Header") }, config.showVoteRoleSetting && /* @__PURE__ */ React.createElement(
    RadioGroup,
    {
      label: t("Poll_PollSettings_Tab_Settings_Section_Voting_Permission_Title"),
      value: pollPermissions?.vote,
      onChange: (vote) => {
        logBi({ dataHook: GENERAL_SETTINGS_VOTE_PERMISSIONS_RADIO_GROUP, value: vote });
        updatePermissions({ vote });
      },
      options: [
        {
          value: PollData_Poll_Settings_Permissions_VoteRole.SITE_MEMBERS,
          label: /* @__PURE__ */ React.createElement(Text, { size: "small" }, t("Poll_PollSettings_Tab_Settings_Section_Voting_Permission_SiteMember"))
        },
        {
          value: PollData_Poll_Settings_Permissions_VoteRole.ALL,
          label: /* @__PURE__ */ React.createElement(Text, { size: "small" }, t("Poll_PollSettings_Tab_Settings_Section_Voting_Permission_All"))
        }
      ],
      dataHook: GENERAL_SETTINGS_VOTE_PERMISSIONS_RADIO_GROUP
    }
  ), /* @__PURE__ */ React.createElement(
    ToggleButton,
    {
      dataHook: GENERAL_SETTINGS_MULTIPLE_ANSWERS_TOGGLE,
      title: t("Poll_PollSettings_Tab_Settings_Section_Voting_Multiselect"),
      checked: !!pollPermissions?.allowMultipleVotes,
      onChange: () => {
        logBi({
          dataHook: GENERAL_SETTINGS_MULTIPLE_ANSWERS_TOGGLE,
          value: !pollPermissions?.allowMultipleVotes
        });
        updatePermissions({ allowMultipleVotes: !pollPermissions?.allowMultipleVotes });
      },
      size: "small"
    }
  )), /* @__PURE__ */ React.createElement(Box, { marginInline: "-18px" }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Section, { title: t("Poll_PollSettings_Tab_Settings_Section_Results_Header") }, /* @__PURE__ */ React.createElement(
    RadioGroup,
    {
      label: t("Poll_PollSettings_Tab_Settings_Section_Results_Permission_Title"),
      value: pollPermissions?.view,
      onChange: (view) => {
        logBi({
          dataHook: GENERAL_SETTINGS_VIEW_PERMISSIONS_RADIO_GROUP,
          value: view
        });
        updatePermissions({ view });
      },
      options: [
        {
          value: PollData_Poll_Settings_Permissions_ViewRole.EVERYONE,
          label: /* @__PURE__ */ React.createElement(
            TextWithInfo,
            {
              text: t("Poll_PollSettings_Tab_Settings_Section_Results_Permission_All"),
              infoContent: t(
                "Poll_PollSettings_Tab_Settings_Section_Results_Permission_All_Tooltip"
              )
            }
          )
        },
        {
          value: PollData_Poll_Settings_Permissions_ViewRole.VOTERS,
          label: /* @__PURE__ */ React.createElement(
            TextWithInfo,
            {
              text: t("Poll_PollSettings_Tab_Settings_Section_Results_Permission_Voters"),
              infoContent: t(
                "Poll_PollSettings_Tab_Settings_Section_Results_Permission_Voters_Tooltip"
              )
            }
          )
        },
        {
          value: PollData_Poll_Settings_Permissions_ViewRole.CREATOR,
          label: /* @__PURE__ */ React.createElement(
            TextWithInfo,
            {
              text: t("Poll_PollSettings_Tab_Settings_Section_Results_Permission_Owner"),
              infoContent: t(
                "Poll_PollSettings_Tab_Settings_Section_Results_Permission_Owner_Tooltip"
              )
            }
          )
        }
      ],
      dataHook: GENERAL_SETTINGS_VIEW_PERMISSIONS_RADIO_GROUP
    }
  ), pollPermissions?.view !== PollData_Poll_Settings_Permissions_ViewRole.CREATOR && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    ToggleButton,
    {
      dataHook: GENERAL_SETTINGS_VOTE_COUNT_TOGGLE,
      title: t("Poll_PollSettings_Tab_Settings_Section_Results_VoteVisibility"),
      checked: !!pmNodeAttrs.poll?.settings?.showVotesCount,
      onChange: () => {
        logBi({
          dataHook: GENERAL_SETTINGS_VOTE_COUNT_TOGGLE,
          value: !pmNodeAttrs.poll?.settings?.showVotesCount
        });
        updateSettings({
          showVoters: !pmNodeAttrs.poll?.settings?.showVotesCount,
          showVotesCount: !pmNodeAttrs.poll?.settings?.showVotesCount
        });
      },
      size: "small"
    }
  ), pmNodeAttrs.poll?.settings?.showVotesCount && /* @__PURE__ */ React.createElement(
    ToggleButton,
    {
      dataHook: GENERAL_SETTINGS_EACH_PERSON_VOTE_TOGGLE,
      title: t("Poll_PollSettings_Tab_Settings_Section_Results_VoterAnonymous"),
      checked: !!pmNodeAttrs.poll?.settings?.showVoters,
      onChange: () => {
        logBi({
          dataHook: GENERAL_SETTINGS_EACH_PERSON_VOTE_TOGGLE,
          value: !pmNodeAttrs.poll?.settings?.showVoters
        });
        updateSettings({ showVoters: !pmNodeAttrs.poll?.settings?.showVoters });
      },
      size: "small"
    }
  ))));
};
const RadioGroup = ({ label, value, onChange, options, dataHook }) => {
  return /* @__PURE__ */ React.createElement(FormField, { label }, /* @__PURE__ */ React.createElement(
    RadioGroupBase,
    {
      value,
      onChange,
      size: "small",
      dataHook
    },
    options.map(({ value: value2, label: label2 }) => /* @__PURE__ */ React.createElement(RadioGroupBase.Radio, { key: value2, value: value2 }, label2))
  ));
};
const TextWithInfo = ({ text, infoContent }) => {
  const zIndexService = useContext(ZIndexContext);
  const containerEl = usePanelContainerElement();
  return /* @__PURE__ */ React.createElement(Box, { verticalAlign: "middle", gap: "SP1" }, /* @__PURE__ */ React.createElement(Text, { size: "small" }, text), /* @__PURE__ */ React.createElement(
    InfoIcon,
    {
      size: "small",
      content: infoContent,
      tooltipProps: {
        appendTo: containerEl,
        zIndex: zIndexService.getZIndex("TOOLTIP")
      }
    }
  ));
};
export {
  PollSettingsSection
};
//# sourceMappingURL=poll-settings-section.js.map
