import { Component, Method, Prop, h, Build, } from "@stencil/core";
import Cropper from "cropperjs";
export class PhotoCropper {
  constructor() {
    this.aspectRatio = 1 / 1;
  }
  async setAspectRatio(aspectRatio) {
    this.aspectRatio = aspectRatio;
  }
  async reset() {
    return this.cropper.reset();
  }
  async getCroppedCanvas(options) {
    return this.cropper.getCroppedCanvas(options);
  }
  async getImageData(type = "image/png", quality = 1.0) {
    const canvasEl = await this.getCroppedCanvas({
      fillColor: "#ffffff",
    });
    return canvasEl.toDataURL(type, quality);
  }
  async replace(src, hasSameSize = false) {
    this.src = src;
    return this.cropper.replace(src, hasSameSize);
  }
  componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    setTimeout(() => {
      this.cropper = new Cropper(this.imgEl, {
        aspectRatio: this.aspectRatio,
      });
    }, 300);
  }
  render() {
    return (h("div", null,
      h("img", { src: this.src, ref: (el) => (this.imgEl = el) })));
  }
  static get is() { return "floodteam-photo-cropper"; }
  static get originalStyleUrls() { return {
    "$": ["photo-cropper.css"]
  }; }
  static get styleUrls() { return {
    "$": ["photo-cropper.css"]
  }; }
  static get properties() { return {
    "src": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "src",
      "reflect": false
    },
    "aspectRatio": {
      "type": "number",
      "mutable": true,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "aspect-ratio",
      "reflect": false,
      "defaultValue": "1 / 1"
    }
  }; }
  static get methods() { return {
    "setAspectRatio": {
      "complexType": {
        "signature": "(aspectRatio: number) => Promise<void>",
        "parameters": [{
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    },
    "reset": {
      "complexType": {
        "signature": "() => Promise<any>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<any>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    },
    "getCroppedCanvas": {
      "complexType": {
        "signature": "(options: any) => Promise<any>",
        "parameters": [{
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<any>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    },
    "getImageData": {
      "complexType": {
        "signature": "(type?: string, quality?: number) => Promise<any>",
        "parameters": [{
            "tags": [],
            "text": ""
          }, {
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<any>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    },
    "replace": {
      "complexType": {
        "signature": "(src: string, hasSameSize?: boolean) => Promise<any>",
        "parameters": [{
            "tags": [],
            "text": ""
          }, {
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<any>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
}
