import { safeCustomElement } from "../../shared/safe-custom-element.js";
import { TailwindStyledElement } from "../../shared/tailwind-element/index.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import "../lukso-icon/index.js";
import { cn } from "../../shared/tools/cn.js";
import "../../shared/tools/index.js";
import style_default from "./style.css?inline.js";
import { html } from "lit";
import { property, state } from "lit/decorators.js";
//#region src/components/lukso-qr-code/index.ts
var QRCodeStyling = null;
var DEFAULT_QR_OPTIONS = {
	dotsOptions: {
		color: "#243542",
		type: "rounded"
	},
	backgroundOptions: { color: "#f8fafb" },
	cornersSquareOptions: { type: "extra-rounded" },
	imageOptions: { margin: 5 }
};
var LuksoQrCode = class LuksoQrCode extends TailwindStyledElement(style_default) {
	constructor(..._args) {
		super(..._args);
		this.value = "";
		this.size = 280;
		this.image = void 0;
		this.options = {};
		this.customClass = void 0;
		this.isLoading = true;
		this.qrCodeInstance = null;
	}
	updated(changedProperties) {
		super.updated(changedProperties);
		if (changedProperties.has("value") && this.value) this.generateQrCode().catch((err) => {
			console.error("Failed to generate QR code:", err);
			this.isLoading = false;
		});
	}
	async generateQrCode() {
		const container = this.shadowRoot?.querySelector(".qr-code-container");
		if (!container) return;
		this.isLoading = true;
		if (!QRCodeStyling) try {
			QRCodeStyling = (await import("qr-code-styling")).default;
		} catch (e) {
			console.error("qr-code-styling not available:", e);
			this.isLoading = false;
			return;
		}
		if (this.qrCodeInstance) this.qrCodeInstance = null;
		this.qrCodeInstance = new QRCodeStyling({
			...DEFAULT_QR_OPTIONS,
			...this.options,
			width: this.size,
			height: this.size,
			type: "svg",
			data: this.value,
			image: this.image || void 0
		});
		container.innerHTML = "";
		this.qrCodeInstance.append(container);
		this.isLoading = false;
	}
	render() {
		return html`
      <div
        class="${cn(`relative flex items-center justify-center ${this.customClass}`)}"
      >
        <div
          class="qr-code-container flex items-center justify-center"
          style="min-height: ${this.size}px; min-width: ${this.size}px"
        ></div>
        <div class="absolute inset-0 flex items-center justify-center">
          ${this.isLoading ? html`<div
                class="flex items-center justify-center"
                style="min-height: ${this.size}px"
              >
                <lukso-icon
                  name="progress-indicator-alt"
                  size="x-large"
                ></lukso-icon>
              </div>` : html`<slot></slot>`}
        </div>
      </div>
    `;
	}
};
__decorate([property({
	type: String,
	reflect: true
})], LuksoQrCode.prototype, "value", void 0);
__decorate([property({
	type: Number,
	reflect: true
})], LuksoQrCode.prototype, "size", void 0);
__decorate([property({
	type: String,
	reflect: true
})], LuksoQrCode.prototype, "image", void 0);
__decorate([property({ type: Object })], LuksoQrCode.prototype, "options", void 0);
__decorate([property({
	type: String,
	attribute: "custom-class",
	reflect: true
})], LuksoQrCode.prototype, "customClass", void 0);
__decorate([state()], LuksoQrCode.prototype, "isLoading", void 0);
LuksoQrCode = __decorate([safeCustomElement("lukso-qr-code")], LuksoQrCode);
//#endregion
export { LuksoQrCode };
