import cls from "classnames";
import React from "react";
import { RicosContext } from "./../../../ricos-context/index.js";
import { Tooltip } from "./../../../wix-rich-content-common/lib/tooltip.js";
import { CheckIcon } from "../../assets/icons/check-icon.js";
import { LoaderIcon } from "../../assets/icons/loader-icon.js";
import { NonEditableIcon } from "../../assets/icons/non-editable-icon.js";
import {
  POLLS_ANSWER_IMAGE,
  POLLS_ANSWER_TEXT_INPUT,
  POLLS_ITEM_PERCENTAGE_PREVIEW
} from "../../data-hooks.js";
import { ImageUpload } from "../image-upload/image-upload.js";
import { TextField } from "../text-field/text-field.js";
import styles from "./option-scss.js";
import { PollOptionBase } from "./poll-option-base.js";
import { RemoveOption } from "./remove-option.js";
class PollGridOption extends PollOptionBase {
  getCustomStyle() {
    const { design } = this.props;
    const borderRadius = parseInt(design.options?.borderRadius);
    return {
      input: {
        borderRadius: this.isImageEnabled() ? `0 0 ${borderRadius}px ${borderRadius}px` : `${borderRadius}px`
      },
      image: {
        borderRadius: `${borderRadius}px ${borderRadius}px 0 0`
      }
    };
  }
  renderEditMode() {
    const { design, option, removeEnabled, dark, t } = this.props;
    const style = this.getCustomStyle();
    return /* @__PURE__ */ React.createElement(
      "div",
      {
        className: cls(styles.option, {
          [styles.with_image]: this.isImageEnabled(),
          [styles.dark]: dark
        }),
        style: design.options
      },
      this.isImageEnabled() && /* @__PURE__ */ React.createElement(
        ImageUpload,
        {
          dataHook: POLLS_ANSWER_IMAGE,
          className: styles.image,
          value: option.image.src.url,
          onChange: this.handleImageChange,
          style: style.image,
          disabled: !this.isEditAllowed()
        }
      ),
      /* @__PURE__ */ React.createElement("div", { className: styles.title }, /* @__PURE__ */ React.createElement(
        TextField,
        {
          dataHook: POLLS_ANSWER_TEXT_INPUT,
          disabled: !this.isEditAllowed(),
          maxLength: 60,
          style: style.input,
          className: cls(styles.input, styles.centered),
          value: option.title,
          placeholder: t("Poll_Editor_Answer_Placeholder"),
          onChange: this.handleTitleChange,
          endAdornment: /* @__PURE__ */ React.createElement(React.Fragment, null, !this.isEditAllowed() ? /* @__PURE__ */ React.createElement(Tooltip, { content: t("Poll_Editor_Answer_Error_NoEdit_Tooltip") }, /* @__PURE__ */ React.createElement(NonEditableIcon, { className: styles.adornment_icon })) : null, removeEnabled && /* @__PURE__ */ React.createElement(RemoveOption, { onClick: this.handleRemove }))
        }
      ))
    );
  }
  renderViewMode() {
    const { design, option, showResults, dark, t } = this.props;
    const { loading, checked } = this.state;
    const style = this.getCustomStyle();
    return /* @__PURE__ */ React.createElement(
      "div",
      {
        className: cls(styles.option, styles.grid, styles.cta, {
          [styles.with_image]: this.isImageEnabled(),
          [styles.user_choice]: this.isUserChoice(),
          [styles.dark]: dark
        }),
        style: design.option,
        onClick: this.handleVoteClick,
        onKeyPress: this.handleVoteClick,
        "aria-label": checked ? t("Poll_Viewer_Option_AriaLabel_Checked") : t("Poll_Viewer_Option_AriaLabel_Unchecked"),
        tabIndex: this.context.tabIndex,
        role: "button"
      },
      /* @__PURE__ */ React.createElement(
        "div",
        {
          className: cls(styles.overlay, {
            [styles.shown]: loading
          }),
          style: design.option
        },
        /* @__PURE__ */ React.createElement(LoaderIcon, { className: styles.spinner, width: 36, height: 36 })
      ),
      this.isImageEnabled() && /* @__PURE__ */ React.createElement(
        ImageUpload,
        {
          dataHook: POLLS_ANSWER_IMAGE,
          className: styles.image,
          value: option.image.src.url,
          style: style.image
        }
      ),
      /* @__PURE__ */ React.createElement("div", { className: styles.title }, /* @__PURE__ */ React.createElement(
        TextField,
        {
          dataHook: POLLS_ANSWER_TEXT_INPUT,
          maxLength: 60,
          style: style.input,
          className: cls(styles.input, styles.centered, {
            [styles.with_result]: showResults
          }),
          value: option.title,
          placeholder: t("Poll_Editor_Answer_Placeholder")
        },
        /* @__PURE__ */ React.createElement(
          "span",
          {
            className: styles.progress,
            style: {
              width: `${this.getVotePercentage()}%`
            }
          }
        ),
        showResults && /* @__PURE__ */ React.createElement("span", { className: styles.progress_value, "data-hook": POLLS_ITEM_PERCENTAGE_PREVIEW }, this.getVotePercentage(), "%")
      )),
      /* @__PURE__ */ React.createElement(
        "div",
        {
          className: styles.check,
          style: {
            color: dark ? "#000" : design.poll.background
          }
        },
        /* @__PURE__ */ React.createElement(CheckIcon, { className: styles.icon })
      )
    );
  }
}
PollGridOption.propTypes = PollOptionBase.propTypes;
PollGridOption.contextType = RicosContext;
export {
  PollGridOption
};
//# sourceMappingURL=poll-grid-option.js.map
