var __classPrivateFieldGet = (this && this.__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;
import { Fragment, Host, h } from "@stencil/core";
/**
 * This component allows you to select an image from the file system.
 */
export class KlevuImagePicker {
  constructor() {
    _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 is() { return "klevu-image-picker"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-image-picker.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-image-picker.css"]
    };
  }
  static get properties() {
    return {
      "isLoading": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "To be used to display loading indicator"
        },
        "attribute": "is-loading",
        "reflect": false,
        "defaultValue": "false"
      },
      "maxFileSize": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Provide max file size in MBs"
        },
        "attribute": "max-file-size",
        "reflect": false,
        "defaultValue": "5"
      }
    };
  }
  static get events() {
    return [{
        "method": "klevuImageSelected",
        "name": "klevuImageSelected",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "This event is fired when an image is selected."
        },
        "complexType": {
          "original": "KlevuImageSelectedEvent",
          "resolved": "{ name: string; image: Blob; }",
          "references": {
            "KlevuImageSelectedEvent": {
              "location": "local",
              "path": "/home/runner/work/frontend-sdk/frontend-sdk/packages/klevu-ui/src/components/klevu-image-picker/klevu-image-picker.tsx",
              "id": "src/components/klevu-image-picker/klevu-image-picker.tsx::KlevuImageSelectedEvent"
            }
          }
        }
      }];
  }
}
_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 });
    }
  }
};
//# sourceMappingURL=klevu-image-picker.js.map
