import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
import { d as defineCustomElement$4 } from './klevu-accordion2.js';
import { d as defineCustomElement$3 } from './klevu-icon2.js';
import { d as defineCustomElement$2 } from './klevu-loading-indicator2.js';
import { d as defineCustomElement$1 } from './klevu-typography2.js';

const klevuImagePickerCss = ":host{display:block}.container{display:block;padding:var(--klevu-spacing-02) var(--klevu-spacing-04);border-radius:0.3rem;border:1px solid var(--klevu-color-neutral-7)}.info{margin:var(--klevu-spacing-04) 0;display:flex;gap:var(--klevu-spacing-04)}klevu-accordion{border:0;padding:0}label{background-color:var(--klevu-color-neutral-7);color:white;font-size:var(--klevu-body-xs-size);padding:0.5rem;border-radius:0.3rem;cursor:pointer;margin-top:1rem;display:flex;align-items:center;width:max-content;gap:var(--klevu-spacing-02)}klevu-loading-indicator{--klevu-loading-indicator-color:var(--klevu-color-neutral-2)}";

var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a getter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _KlevuImagePicker_instances, _KlevuImagePicker_handleImageSelection;
const KlevuImagePicker = /*@__PURE__*/ proxyCustomElement(class KlevuImagePicker extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.klevuImageSelected = createEvent(this, "klevuImageSelected", 7);
    _KlevuImagePicker_instances.add(this);
    this.isLoading = false;
    this.maxFileSize = 5;
  }
  render() {
    return (h(Host, null, h("div", { class: "container", onClick: (e) => {
        e.stopPropagation();
      }, onFocus: (e) => {
        e.stopPropagation();
      } }, h("p", null, h("klevu-typography", { variant: "h4" }, "Visual Image Search")), h("label", { htmlFor: "select-image" }, this.isLoading ? (h("klevu-loading-indicator", null)) : (h(Fragment, null, h("klevu-icon", { name: "upload" }), h("span", null, "Upload a photo")))), h("input", { hidden: true, id: "select-image", type: "file", onClick: (e) => {
        e.stopPropagation();
      }, onFocus: (e) => {
        e.stopPropagation();
      }, onChange: __classPrivateFieldGet(this, _KlevuImagePicker_instances, "m", _KlevuImagePicker_handleImageSelection).bind(this) }), h("p", { class: "info" }, h("klevu-icon", { name: "info" }), h("klevu-typography", { variant: "body-xs" }, "Your privacy is of utmost importance to us. Any images uploaded will only be used to provide relevant results and improve the general search experience. However, we recommend not uploading images containing people or sensitive information.")), h("klevu-accordion", null, h("span", { slot: "header" }, "How does this work?"), h("div", { slot: "content" }, h("klevu-typography", { variant: "body-xs" }, "After you take or upload a photo, we'll analyse it and recommend the closest matches."))))));
  }
  static get style() { return klevuImagePickerCss; }
}, [0, "klevu-image-picker", {
    "isLoading": [4, "is-loading"],
    "maxFileSize": [2, "max-file-size"]
  }]);
_KlevuImagePicker_instances = new WeakSet(), _KlevuImagePicker_handleImageSelection = function _KlevuImagePicker_handleImageSelection(e) {
  e.preventDefault();
  e.stopPropagation();
  const target = e.target;
  if ((target === null || target === void 0 ? void 0 : target.files) && (target === null || target === void 0 ? void 0 : target.files.length) > 0) {
    var fileSize = target.files[0].size / 1024 / 1024;
    if (fileSize > this.maxFileSize) {
      alert(`File size exceeds ${this.maxFileSize} MiB`);
    }
    else {
      this.klevuImageSelected.emit({ image: target.files[0], name: target.files[0].name });
    }
  }
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-image-picker", "klevu-accordion", "klevu-icon", "klevu-loading-indicator", "klevu-typography"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-image-picker":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuImagePicker);
      }
      break;
    case "klevu-accordion":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "klevu-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "klevu-loading-indicator":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { KlevuImagePicker as K, defineCustomElement as d };

//# sourceMappingURL=klevu-image-picker2.js.map