import { LightningElement, api } from "lwc";
import { LightningSlotElement } from "typings/custom";
import debounce from "debounce";
import { isSlotEmpty } from "dxUtils/slot";
const MOBILE_SIZE = 640;
const getInputSize = () =>
    (window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth) < MOBILE_SIZE
        ? "small"
        : "large";
export default class SectionSignup extends LightningElement {
    @api inputTitle?: string = "";
    @api inputPlaceholder?: string = "";
    @api inputSubmitLabel?: string = "Subscribe";

    private isSlotEmpty: boolean = true;
    private size: string = getInputSize();

    connectedCallback() {
        window.addEventListener("resize", this.onResize.bind(this));
    }

    disconnectedCallback() {
        window.removeEventListener("resize", this.onResize.bind(this));
    }

    private onSubmit(e: CustomEvent) {
        e.stopPropagation();
        this.dispatchEvent(new CustomEvent("subscribe", { detail: e.detail }));
    }

    private onSlotChange(e: LightningSlotElement) {
        this.isSlotEmpty = isSlotEmpty(e);
    }

    private _updateSize = () => {
        this.size = getInputSize();
    };

    private onResize = () =>
        // @ts-ignore something weird happening here with debounce types
        debounce(this._updateSize.bind(this)(), 600);
}