import html from "../../services/html.js";
import t from "../../i18n/index.js";
export default function render({ label, value, helper }) {
    const hasImage = value.length > 0;
    return html `
    <div class="image-picker">
      ${renderLabel(label)}
      <div class="image-picker__inner">
        <button
          type="button"
          is="eden-button"
          class="image-picker__field ${hasImage
        ? "image-picker__field--filled"
        : ""}"
          ${hasImage ? `tooltip="${t("ui.image-picker.change")}"` : ""}
        >
          ${hasImage ? renderPreview() : renderPlaceholder()}
        </button>
        ${hasImage ? renderClearButton() : ""}
      </div>
      ${renderHelper(helper)}
    </div>
  `;
}
function renderLabel(label) {
    if (!label.length)
        return "";
    return html `<div class="image-picker__label">${label}</div>`;
}
function renderPreview() {
    return html `<img class="image-picker__preview" alt="" />`;
}
function renderPlaceholder() {
    return html `
    <span class="image-picker__placeholder">
      <eden-icon
        code="image"
        class="image-picker__placeholder-icon"
      ></eden-icon>
      ${t("ui.image-picker.select")}
    </span>
  `;
}
function renderClearButton() {
    return html `
    <button
      type="button"
      is="eden-button"
      class="image-picker__clear"
      tooltip="${t("ui.image-picker.remove")}"
    >
      <eden-icon code="close"></eden-icon>
    </button>
  `;
}
function renderHelper(helper) {
    if (!helper?.length)
        return "";
    return html `<div class="image-picker__helper">${helper}</div>`;
}
