/*!
 * KoliBri - The accessible HTML-Standard
 */
'use strict';

var index = require('./index-DBbl8tEq.js');
var tslib_es6 = require('./tslib.es6-Cm0ytgPY.js');
var variantQuote = require('./variant-quote-DUWZtljE.js');
var bemRegistry = require('./bem-registry-D9uDM1GJ.js');
var component = require('./component-EJOcQRXl.js');
var common = require('./common-DAAt5YQ7.js');
var elementFocus = require('./element-focus-B4BhAkh_.js');
var elementInteraction = require('./element-interaction-CmOQWzhR.js');
var normalizers = require('./normalizers-R90MJyQR.js');
var baseController = require('./base-controller-DAzsTqX9.js');
require('./_Uint8Array-BAQUGozM.js');
require('./isArray-BOIOdEQh.js');

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

const skeletonBem = bemRegistry.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 (index.h("div", { class: BEM_CLASS_ROOT }, index.h("div", { class: BEM_CLASS_SKELETON__CONTAINER }, hasName && index.h("span", { class: BEM_CLASS_SKELETON__NAME }, name), index.h("div", { class: BEM_CLASS_SKELETON__COUNTER }, "Count: ", count)), index.h("div", { class: BEM_CLASS_SKELETON__ACTIONS }, index.h(component.ClickButtonFC, { label: label, handleClick: handleClick, refButton: refButton }))));
};

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

class SkeletonController extends baseController.BaseController {
    constructor(stateAccess) {
        super(stateAccess, skeletonPropsConfig);
        this.buttonRef = elementInteraction.createCtaRef();
        this.onKeydown = (event) => {
            if (event.key === 'Escape') {
                console.log('Show should be toggled');
                void this.toggle();
            }
        };
        this.handleClick = () => {
            var _a, _b;
            common.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 elementFocus.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 variantQuote.BaseWebComponent {
    constructor(hostRef) {
        super();
        index.registerInstance(this, hostRef);
        this.loaded = index.createEvent(this, "loaded");
        this.rendered = index.createEvent(this, "rendered");
        this.ctrl = new SkeletonController(this.stateAccess);
        this.buttonRef = elementInteraction.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 === ' ') {
            common.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 (index.h(index.Host, { key: 'e7e29ff558a0f2d6eebba4d8b2247ee269836bb5' }, index.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"]
    }; }
};
tslib_es6.__decorate([
    elementInteraction.delegateFocus('buttonRef')
], KolSkeleton.prototype, "focus", null);

exports.kol_skeleton = KolSkeleton;
//# sourceMappingURL=kol-skeleton.entry.cjs.js.map
