import html from "../../services/html.js";
import { buildConfirmCancelButtons, getModalInputValue, openPluginModal, } from "./modal-controller.js";
import t from "../../i18n/index.js";
export default class VideoModal {
    constructor(onChange, url) {
        this.onClick = () => {
            const url = getModalInputValue(this.modal, "url");
            this.onChange(url);
        };
        this.onChange = onChange;
        this.modal = openPluginModal({
            icon: "movie",
            title: t("modals.video.title"),
            content: template(url),
            buttons: buildConfirmCancelButtons({
                confirmLabel: t("common.add"),
                onConfirm: this.onClick,
            }),
        });
    }
}
function template(url) {
    return html `
    <style>
      .modal__form {
        width: 400px;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 10px 0;
        box-sizing: border-box;
      }

      .modal__information {
        font-size: 13px;
        padding: 5px 0;
        color: var(--eden-grey-500);
      }
    </style>
    <div class="modal__form">
      <eden-input
        type="text"
        label="${t("modals.video.link")}"
        name="url"
        value="${url || ""}"
      ></eden-input>
      <div class="modal__information">
        ${t("modals.video.copy-url-info")}<br />
      </div>
    </div>
  `;
}
