import "../../common/atomic-modal/atomic-modal.js";
import { buildSmartSnippet } from "@coveo/headless/insight";
import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { keyed } from "lit/directives/keyed.js";
import { createRef } from "lit/directives/ref.js";
import { ATOMIC_MODAL_EXPORT_PARTS } from "../../common/atomic-modal/export-parts.js";
import { feedbackOptions } from "../../common/smart-snippets/atomic-smart-snippet-feedback-modal/feedback-options.js";
import { renderModalBody } from "../../common/smart-snippets/atomic-smart-snippet-feedback-modal/modal-body.js";
import { renderModalDetails } from "../../common/smart-snippets/atomic-smart-snippet-feedback-modal/modal-details.js";
import { renderModalFooter } from "../../common/smart-snippets/atomic-smart-snippet-feedback-modal/modal-footer.js";
import { renderModalHeader } from "../../common/smart-snippets/atomic-smart-snippet-feedback-modal/modal-header.js";
import { renderModalOption } from "../../common/smart-snippets/atomic-smart-snippet-feedback-modal/modal-option.js";
import { renderModalOptions } from "../../common/smart-snippets/atomic-smart-snippet-feedback-modal/modal-options.js";
import { booleanConverter } from "../../../converters/boolean-converter.js";
import { bindingGuard } from "../../../decorators/binding-guard.js";
import { bindings } from "../../../decorators/bindings.js";
import { errorGuard } from "../../../decorators/error-guard.js";
import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
import { updateBreakpoints } from "../../../utils/replace-breakpoint-utils.js";
import { randomID } from "../../../utils/utils.js";
import atomic_insight_smart_snippet_feedback_modal_tw_css from "./atomic-insight-smart-snippet-feedback-modal.tw.css.js";
function _ts_decorate(decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);
    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function _ts_metadata(k, v) {
    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
}
class AtomicInsightSmartSnippetFeedbackModal extends LitElement {
    initialize() {
        this.smartSnippet = buildSmartSnippet(this.bindings.engine);
    }
    updated(changedProperties) {
        if (changedProperties.has('isOpen') && this.isOpen && this.smartSnippet) {
            this.smartSnippet.openFeedbackModal();
            this.currentAnswer = void 0;
        }
    }
    render() {
        updateBreakpoints(this);
        return html`
      <atomic-modal
        .source=${this.source}
        .container=${this}
        .isOpen=${this.isOpen}
        .close=${()=>this.close()}
        exportparts=${ATOMIC_MODAL_EXPORT_PARTS}
      >
        ${renderModalHeader({
            props: {
                i18n: this.bindings.i18n
            }
        })}
        ${renderModalBody({
            props: {
                formId: this.formId,
                onSubmit: (e)=>this.sendFeedback(e)
            }
        })(html`
          ${renderModalOptions({
            props: {
                i18n: this.bindings.i18n
            }
        })(html`${feedbackOptions.map(({ id, localeKey, correspondingAnswer })=>keyed(id, renderModalOption({
                props: {
                    correspondingAnswer,
                    currentAnswer: this.currentAnswer,
                    i18n: this.bindings.i18n,
                    id,
                    localeKey,
                    onChange: ()=>{
                        this.currentAnswer = correspondingAnswer;
                    }
                }
            })))}`)}
          ${renderModalDetails({
            props: {
                currentAnswer: this.currentAnswer,
                i18n: this.bindings.i18n,
                detailsInputRef: this.detailsInputRef
            }
        })}
        `)}
        ${renderModalFooter({
            props: {
                formId: this.formId,
                i18n: this.bindings.i18n,
                onClick: ()=>this.close()
            }
        })}
      </atomic-modal>
    `;
    }
    close() {
        this.isOpen = false;
        this.smartSnippet.closeFeedbackModal();
    }
    sendFeedback(e) {
        e.preventDefault();
        if ('other' === this.currentAnswer) this.smartSnippet.sendDetailedFeedback(this.detailsInputRef.value.value);
        else this.smartSnippet.sendFeedback(this.currentAnswer);
        this.dispatchEvent(new Event('feedbackSent'));
        this.isOpen = false;
    }
    constructor(...args){
        super(...args), this.isOpen = false, this.detailsInputRef = createRef(), this.formId = randomID('atomic-insight-smart-snippet-feedback-modal-form-');
    }
}
AtomicInsightSmartSnippetFeedbackModal.styles = atomic_insight_smart_snippet_feedback_modal_tw_css;
_ts_decorate([
    state(),
    _ts_metadata("design:type", "u" < typeof InsightBindings ? Object : InsightBindings)
], AtomicInsightSmartSnippetFeedbackModal.prototype, "bindings", void 0);
_ts_decorate([
    state(),
    _ts_metadata("design:type", "u" < typeof Error ? Object : Error)
], AtomicInsightSmartSnippetFeedbackModal.prototype, "error", void 0);
_ts_decorate([
    property({
        type: Object,
        attribute: false
    }),
    _ts_metadata("design:type", "u" < typeof HTMLElement ? Object : HTMLElement)
], AtomicInsightSmartSnippetFeedbackModal.prototype, "source", void 0);
_ts_decorate([
    property({
        type: Boolean,
        reflect: true,
        attribute: 'is-open',
        converter: booleanConverter
    })
], AtomicInsightSmartSnippetFeedbackModal.prototype, "isOpen", void 0);
_ts_decorate([
    state(),
    _ts_metadata("design:type", Object)
], AtomicInsightSmartSnippetFeedbackModal.prototype, "currentAnswer", void 0);
_ts_decorate([
    errorGuard(),
    bindingGuard(),
    _ts_metadata("design:type", Function),
    _ts_metadata("design:paramtypes", []),
    _ts_metadata("design:returntype", void 0)
], AtomicInsightSmartSnippetFeedbackModal.prototype, "render", null);
AtomicInsightSmartSnippetFeedbackModal = _ts_decorate([
    customElement('atomic-insight-smart-snippet-feedback-modal'),
    bindings(),
    withTailwindStyles
], AtomicInsightSmartSnippetFeedbackModal);
export { AtomicInsightSmartSnippetFeedbackModal };
