---
export interface Props {
    checked?: boolean;
    name?: string;
    id: string;
}

const { checked = false, name = 'toggle', id} = Astro.props;
---

<toggle-switch data-checked={checked} data-name={name} id={id}>
    <div class="toggle">
        <div class="toggle-switch"></div>
    </div>
</toggle-switch>

<script>
    class ToggleSwitch extends HTMLElement {
        private _checked: boolean = false;

        connectedCallback() {
            this._checked = this.dataset.checked === 'true';
            this.updateUI();

            this.querySelector('.toggle')?.addEventListener('click', () => {
                this.toggle();
            });
        }

        toggle() {
            this._checked = !this._checked;
            this.updateUI();

            this.dispatchEvent(new CustomEvent('change', {
                detail: { checked: this._checked, name: this.dataset.name },
                bubbles: true, 
                composed: true,
            }));
        }
        set checked(value: boolean) {
            this._checked = value;
            this.updateUI();
        }

        get checked() {
            return this._checked;
        }

        private updateUI() {
            this.dataset.checked = String(this._checked);
            this.querySelector('.toggle')?.classList.toggle('toggle-active', this._checked);
        }
    }

    customElements.define('toggle-switch', ToggleSwitch);
</script>

<style lang="scss">
@use './_toggle.scss';
</style>