"use strict";
var __webpack_require__ = {};
(()=>{
    __webpack_require__.n = (module)=>{
        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
        __webpack_require__.d(getter, {
            a: getter
        });
        return getter;
    };
})();
(()=>{
    __webpack_require__.d = (exports1, definition)=>{
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
(()=>{
    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
    __webpack_require__.r = (exports1)=>{
        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
    renderSmartSnippetFeedbackBanner: ()=>renderSmartSnippetFeedbackBanner
});
require("../atomic-icon/atomic-icon.cjs");
const external_lit_namespaceObject = require("lit");
const when_js_namespaceObject = require("lit/directives/when.js");
const multi_class_map_cjs_namespaceObject = require("../../../directives/multi-class-map.cjs");
const checkmark_cjs_namespaceObject = require("../../../images/checkmark.cjs");
var checkmark_cjs_default = /*#__PURE__*/ __webpack_require__.n(checkmark_cjs_namespaceObject);
const cross_cjs_namespaceObject = require("../../../images/cross.cjs");
var cross_cjs_default = /*#__PURE__*/ __webpack_require__.n(cross_cjs_namespaceObject);
const external_button_cjs_namespaceObject = require("../button.cjs");
const external_radio_button_cjs_namespaceObject = require("../radio-button.cjs");
const renderSmartSnippetFeedbackBanner = ({ props })=>{
    const inquiryId = `feedback-inquiry-${props.id}`;
    const thankYouId = `feedback-thank-you-${props.id}`;
    const radioGroupName = `feedback-options-${props.id}`;
    const renderInquiry = ()=>(0, external_lit_namespaceObject.html)`<span id=${inquiryId} part="feedback-inquiry" class="shrink-0">
      ${props.i18n.t('smart-snippet-feedback-inquiry')}
    </span>`;
    const renderButtons = ()=>(0, external_lit_namespaceObject.html)`<div part="feedback-buttons" class="flex gap-x-4">
      <label
        part="feedback-like-button"
        class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            flex: true,
            'items-center': true,
            'gap-x-1.5': true,
            'text-success': props.liked,
            'cursor-pointer': !props.liked,
            'hover:underline': !props.liked
        })}
      >
        <atomic-icon icon=${checkmark_cjs_default()} class="w-3.5"></atomic-icon>
        ${(0, external_radio_button_cjs_namespaceObject.renderRadioButton)({
            props: {
                groupName: radioGroupName,
                text: props.i18n.t('yes'),
                checked: props.liked,
                onChecked: ()=>props.onLike(),
                class: 'cursor-[inherit] text-[inherit]'
            }
        })}
      </label>
      <label
        part="feedback-dislike-button"
        class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            flex: true,
            'items-center': true,
            'gap-x-1.5': true,
            'text-error': props.disliked,
            'cursor-pointer': !props.disliked,
            'hover:underline': !props.disliked
        })}
      >
        <atomic-icon icon=${cross_cjs_default()} class="w-3.5"></atomic-icon>
        ${(0, external_radio_button_cjs_namespaceObject.renderRadioButton)({
            props: {
                groupName: radioGroupName,
                text: props.i18n.t('no'),
                checked: props.disliked,
                onChecked: ()=>props.onDislike(),
                class: 'cursor-[inherit] text-[inherit]'
            }
        })}
      </label>
    </div>`;
    const renderThankYouMessage = ()=>(0, external_lit_namespaceObject.html)`<span id=${thankYouId} part="feedback-thank-you" class="inline-flex">
      ${props.i18n.t('smart-snippet-feedback-thanks')}
    </span>`;
    const renderExplainWhyButton = ()=>(0, external_button_cjs_namespaceObject.renderButton)({
            props: {
                style: 'text-primary',
                part: 'feedback-explain-why-button',
                onClick: ()=>props.onPressExplainWhy(),
                ref: props.explainWhyRef
            }
        })((0, external_lit_namespaceObject.html)`${props.i18n.t('smart-snippet-feedback-explain-why')}`);
    const renderThankYouContainer = (visible)=>(0, when_js_namespaceObject.when)(visible, ()=>(0, external_lit_namespaceObject.html)`<div
          part="feedback-thank-you-wrapper"
          class="flex flex-wrap gap-1"
        >
          ${renderThankYouMessage()}
          ${(0, when_js_namespaceObject.when)(props.disliked && !props.feedbackSent, ()=>renderExplainWhyButton())}
        </div>`);
    return (0, external_lit_namespaceObject.html)`<div
    part="feedback-banner"
    class="flex flex-wrap items-center gap-4 text-sm leading-4"
  >
    <div
      part="feedback-inquiry-and-buttons"
      role="radiogroup"
      aria-labelledby=${inquiryId}
      class="inline-flex flex-wrap gap-4"
    >
      ${renderInquiry()} ${renderButtons()}
    </div>
    ${renderThankYouContainer(props.liked || props.disliked)}
  </div>`;
};
exports.renderSmartSnippetFeedbackBanner = __webpack_exports__.renderSmartSnippetFeedbackBanner;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "renderSmartSnippetFeedbackBanner"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
