import { html } from 'lit-html';
import { customElement, property } from '@lit-html-free/core';

@customElement('app-component')
export default class extends HTMLElement {
    @property() public counterApp: number = 0;

    valuesChanged(
        type: 'property' | 'attribute',
        name: string,
        oldValue: string,
        newValue: string
    ) {
        console.log('valuesChanged app-component:', type, name, oldValue, newValue);
    }

    connectedCallback() {
        setInterval(() => {
            console.log('timer app-component');
            this.counterApp++;
        }, 3000);
    }

    updated() {
        console.log('updated app-component');
    }

    public render() {
        console.log('render called app-component');
        return html`
            <home-component my-attribute=${this.counterApp}></home-component>
        `;
    }
}