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 "../lukso-sanitize/index.js";
import { customClassMap } from "../../shared/directives/custom-class-map/index.js";
import "../../shared/directives/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-terms/index.ts
var LuksoTerms = class LuksoTerms extends TailwindStyledElement(style_default) {
	constructor(..._args) {
		super(..._args);
		this.text = "";
		this.hasScrollButton = true;
		this.defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
    bg-gradient-to-b from-transparent to-neutral-100/80
    flex justify-center transition-opacity opacity-0`;
	}
	onScrollBottom() {
		const event = new CustomEvent("on-bottom-scroll", {
			bubbles: true,
			composed: true
		});
		this.dispatchEvent(event);
	}
	handleScroll() {
		const scrollContainer = this.shadowRoot.getElementById("scroll-container");
		const scrollHeight = scrollContainer.scrollHeight - scrollContainer.offsetHeight;
		if (scrollContainer.scrollTop >= scrollHeight) {
			this.onScrollBottom();
			this.hasScrollButton = false;
		} else this.hasScrollButton = true;
	}
	handleBottomScroll() {
		const scrollEnd = this.shadowRoot.getElementById("scroll-end");
		if (scrollEnd) scrollEnd.scrollIntoView({
			behavior: "smooth",
			block: "nearest",
			inline: "start"
		});
	}
	render() {
		return html`<div
      id="scroll-container"
      class="border border-solid border-neutral-90 rounded-12 overflow-y-scroll relative scrollbar-none"
      @scroll=${this.handleScroll}
    >
      <div class="paragraph-inter-12-regular px-4 pt-3">
        <lukso-sanitize html-content=${this.text} is-pre></lukso-sanitize>
        <br />
        <br />
        <div id="scroll-end"></div>
      </div>
      <div
        class=${customClassMap({
			[this.defaultStyles]: true,
			"!opacity-100": this.hasScrollButton
		})}
      >
        <div
          data-testid="scroll-to-bottom"
          class="w-10 h-10 bg-neutral-100 rounded-full shadow-1xl flex items-center justify-center animate-bounce2 cursor-pointer"
          @click=${this.handleBottomScroll}
        >
          <lukso-icon name="arrow-down-lg"></lukso-icon>
        </div>
      </div>
    </div>`;
	}
};
__decorate([property({ type: String })], LuksoTerms.prototype, "text", void 0);
__decorate([state()], LuksoTerms.prototype, "hasScrollButton", void 0);
LuksoTerms = __decorate([safeCustomElement("lukso-terms")], LuksoTerms);
//#endregion
export { LuksoTerms };
