import html from "../../services/html.js";
import { buildConfirmCancelButtons, getModalInputValue, isModalCheckboxChecked, openPluginModal, } from "./modal-controller.js";
import t from "../../i18n/index.js";
export default class IframeModal {
    constructor(onChange, url, width, height, allowFullscreen) {
        this.onClick = () => {
            const url = getModalInputValue(this.modal, "url");
            const width = getModalInputValue(this.modal, "width");
            const height = getModalInputValue(this.modal, "height");
            const allowFullscreen = isModalCheckboxChecked(this.modal, "allowFullscreen");
            this.onChange(url, width, height, allowFullscreen);
        };
        this.onChange = onChange;
        this.modal = openPluginModal({
            title: t("modals.iframe.title"),
            content: template(url, width, height, allowFullscreen),
            buttons: buildConfirmCancelButtons({
                confirmLabel: t("common.add"),
                onConfirm: this.onClick,
            }),
        });
    }
}
function template(url = "", width = "1000", height = "450", allowFullscreen) {
    return html `
    <style>
      .modal__form {
        width: 450px;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 10px 0;
        box-sizing: border-box;
      }
    </style>
    <div class="modal__form">
      <eden-input
        type="text"
        label="${t("modals.iframe.url")}"
        name="url"
        value="${url}"
      ></eden-input>
      <eden-input
        type="text"
        label="${t("modals.iframe.width")}"
        name="width"
        value="${width}"
      ></eden-input>
      <eden-input
        type="text"
        label="${t("modals.iframe.height")}"
        name="height"
        value="${height}"
      ></eden-input>
      <eden-checkbox
        label="${t("modals.iframe.allow-fullscreen")}"
        name="allowFullscreen"
        checked="${allowFullscreen}"
      ></eden-checkbox>
    </div>
  `;
}
