/*!
 * KoliBri - The accessible HTML-Standard
 */
import { h, r as registerInstance, c as createEvent, H as Host } from './index-Brmny3Vg.js';
import { _ as __decorate } from './tslib.es6-QNbPBOk5.js';
import { B as BaseWebComponent } from './variant-quote-BMV8GZX8.js';
import { b as bem } from './bem-registry-B9CzNnO1.js';
import { C as ClickButtonFC } from './component-DohIJBPw.js';
import { L as Log } from './common-DEEjER7G.js';
import { s as setFocus } from './element-focus-BQXzaLL9.js';
import { c as createCtaRef, d as delegateFocus } from './element-interaction-C5-6aPzz.js';
import { c as createPropDefinition, n as normalizeString } from './normalizers-pgU77mXp.js';
import { B as BaseController } from './base-controller-CXhqh4cR.js';
import './_Uint8Array-kJHDjtoP.js';
import './isArray-CcrBs4JM.js';

const nameProp = createPropDefinition('name', '', normalizeString);

const skeletonBem = bem.forBlock('kol-skeleton');
const BEM_CLASS_SKELETON__ACTIONS = skeletonBem('actions');
const BEM_CLASS_SKELETON__CONTAINER = skeletonBem('container');
const BEM_CLASS_SKELETON__COUNTER = skeletonBem('counter');
const BEM_CLASS_SKELETON__NAME = skeletonBem('name');
const SkeletonFC = (props) => {
    const { count, label, name, show, handleClick, refButton } = props;
    const hasName = !!(show && (name === null || name === void 0 ? void 0 : name.trim()));
    const BEM_CLASS_ROOT = skeletonBem({
        'has-name': hasName,
        'is-hidden': !show,
    });
    return (h("div", { class: BEM_CLASS_ROOT }, h("div", { class: BEM_CLASS_SKELETON__CONTAINER }, hasName && h("span", { class: BEM_CLASS_SKELETON__NAME }, name), h("div", { class: BEM_CLASS_SKELETON__COUNTER }, "Count: ", count)), h("div", { class: BEM_CLASS_SKELETON__ACTIONS }, h(ClickButtonFC, { label: label, handleClick: handleClick, refButton: refButton }))));
};

const skeletonPropsConfig = {
    required: [nameProp],
};

class SkeletonController extends BaseController {
    constructor(stateAccess) {
        super(stateAccess, skeletonPropsConfig);
        this.buttonRef = createCtaRef();
        this.onKeydown = (event) => {
            if (event.key === 'Escape') {
                console.log('Show should be toggled');
                void this.toggle();
            }
        };
        this.handleClick = () => {
            var _a, _b;
            Log.debug('Button clicked, count should be increased');
            this.setState('count', ((_b = (_a = this.getState) === null || _a === void 0 ? void 0 : _a.call(this, 'count')) !== null && _b !== void 0 ? _b : 0) + 1);
        };
        this.setButtonRef = (element) => {
            this.buttonRef(element);
        };
        this.startLoadedEventInterval();
    }
    componentWillLoad(props) {
        const { name } = props;
        this.watchName(name);
    }
    watchName(value) {
        nameProp.apply(value, (v) => {
            this.setRenderProp('name', v);
        });
    }
    toggle() {
        var _a, _b;
        this.setState('show', !((_b = (_a = this.getState) === null || _a === void 0 ? void 0 : _a.call(this, 'show')) !== null && _b !== void 0 ? _b : false));
    }
    focus(options) {
        void setFocus(this.buttonRef.el, options);
    }
    startLoadedEventInterval() {
        this.intervalId = setInterval(() => {
            var _a, _b;
            this.emitLoaded((_b = (_a = this.getState) === null || _a === void 0 ? void 0 : _a.call(this, 'count')) !== null && _b !== void 0 ? _b : 0);
        }, 2000);
    }
    emitLoaded(count) {
        if (this.onLoadedCallback) {
            this.onLoadedCallback(count);
        }
    }
    setOnLoadedCallback(callback) {
        this.onLoadedCallback = callback;
    }
    destroy() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
            this.intervalId = undefined;
        }
    }
}

const KolSkeleton = class extends BaseWebComponent {
    constructor(hostRef) {
        super();
        registerInstance(this, hostRef);
        this.loaded = createEvent(this, "loaded");
        this.rendered = createEvent(this, "rendered");
        this.ctrl = new SkeletonController(this.stateAccess);
        this.buttonRef = createCtaRef();
        this.count = 0;
        this.label = 'Label';
        this.show = true;
    }
    async focus(options) { }
    async toggle() {
        return Promise.resolve(this.ctrl.toggle());
    }
    watchName(value) {
        this.ctrl.watchName(value);
    }
    handleKeyDown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            Log.debug('button pressed');
            this.ctrl.handleClick();
        }
    }
    onKeydown(event) {
        this.ctrl.onKeydown(event);
    }
    componentWillLoad() {
        this.ctrl.componentWillLoad({
            name: this._name,
        });
        this.ctrl.setOnLoadedCallback((count) => {
            this.loaded.emit(count);
        });
    }
    componentDidLoad() {
        requestAnimationFrame(() => {
            this.rendered.emit();
        });
    }
    disconnectedCallback() {
        this.ctrl.destroy();
    }
    render() {
        return (h(Host, { key: 'e7e29ff558a0f2d6eebba4d8b2247ee269836bb5' }, h(SkeletonFC, { key: '949256a8455d79b2ea97182ecbf509fb0f3e59ee', count: this.count, label: this.label, name: this.ctrl.getRenderProp('name'), handleClick: this.ctrl.handleClick, onLoaded: this.loaded, onRendered: this.rendered, show: this.show, refButton: (element) => {
                this.buttonRef(element);
                this.ctrl.setButtonRef(element);
            } })));
    }
    static get watchers() { return {
        "_name": ["watchName"]
    }; }
};
__decorate([
    delegateFocus('buttonRef')
], KolSkeleton.prototype, "focus", null);

export { KolSkeleton as kol_skeleton };
//# sourceMappingURL=kol-skeleton.entry.js.map
