import * as i0 from '@angular/core';
import { inject, PLATFORM_ID, DOCUMENT, effect, TemplateRef, Directive, ViewContainerRef, contentChild, computed, output, ChangeDetectionStrategy, Component } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { signalStore, withState, withMethods, patchState, withHooks } from '@ngrx/signals';
import { TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
import { Button } from '@ngstarter-ui/components/button';

const COLOR_SCHEME_LOCAL_KEY = 'ngstarter-color-scheme';

const initialState = {
    theme: 'light',
};
const ColorSchemeStore = signalStore(withState(initialState), withMethods((store) => {
    const platformId = inject(PLATFORM_ID);
    return {
        setScheme(scheme) {
            patchState(store, { theme: scheme });
            if (isPlatformBrowser(platformId)) {
                localStorage.setItem(COLOR_SCHEME_LOCAL_KEY, scheme);
            }
        },
    };
}), withHooks({
    onInit(store) {
        const document = inject(DOCUMENT);
        effect(() => {
            const scheme = store.theme();
            if (scheme === 'dark') {
                document.documentElement.classList.add('dark');
            }
            else if (scheme === 'light') {
                document.documentElement.classList.remove('dark');
            }
        });
    },
}));

class ColorSchemeLightDirective {
    templateRef = inject(TemplateRef);
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorSchemeLightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ColorSchemeLightDirective, isStandalone: true, selector: "[ngsColorSchemeLight]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorSchemeLightDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsColorSchemeLight]'
                }]
        }] });

class ColorSchemeDarkDirective {
    templateRef = inject(TemplateRef);
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorSchemeDarkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ColorSchemeDarkDirective, isStandalone: true, selector: "[ngsColorSchemeDark]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorSchemeDarkDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsColorSchemeDark]'
                }]
        }] });

class ColorSchemeSwitcher {
    store = inject(ColorSchemeStore);
    viewContainerRef = inject(ViewContainerRef);
    lightRef = contentChild.required(ColorSchemeLightDirective);
    darkRef = contentChild.required(ColorSchemeDarkDirective);
    colorScheme = computed(() => this.store.theme(), ...(ngDevMode ? [{ debugName: "colorScheme" }] : /* istanbul ignore next */ []));
    colorSchemeChanged = output();
    portal;
    ngOnInit() {
        this.setPortal();
    }
    toggleScheme() {
        const newScheme = this.store.theme() === 'dark' ? 'light' : 'dark';
        this.store.setScheme(newScheme);
        this.setPortal();
        this.colorSchemeChanged.emit(this.store.theme());
    }
    setPortal() {
        if (this.colorScheme() === 'light') {
            this.portal = new TemplatePortal(this.lightRef().templateRef, this.viewContainerRef);
        }
        else if (this.colorScheme() === 'dark') {
            this.portal = new TemplatePortal(this.darkRef().templateRef, this.viewContainerRef);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorSchemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ColorSchemeSwitcher, isStandalone: true, selector: "ngs-color-scheme-switcher", outputs: { colorSchemeChanged: "colorSchemeChanged" }, host: { attributes: { "ngSkipHydration": "true" }, classAttribute: "ngs-color-scheme-switcher" }, queries: [{ propertyName: "lightRef", first: true, predicate: ColorSchemeLightDirective, descendants: true, isSignal: true }, { propertyName: "darkRef", first: true, predicate: ColorSchemeDarkDirective, descendants: true, isSignal: true }], exportAs: ["ngsColorSchemeSwitcher"], ngImport: i0, template: "<button ngsIconButton (click)=\"toggleScheme()\">\n  <ng-container [cdkPortalOutlet]=\"portal\"/>\n</button>\n", styles: [":host{display:block;width:max-content}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorSchemeSwitcher, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-color-scheme-switcher', exportAs: 'ngsColorSchemeSwitcher', imports: [
                        CdkPortalOutlet,
                        Button,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-color-scheme-switcher',
                        ngSkipHydration: 'true' // important! to prevent double render for icons
                    }, template: "<button ngsIconButton (click)=\"toggleScheme()\">\n  <ng-container [cdkPortalOutlet]=\"portal\"/>\n</button>\n", styles: [":host{display:block;width:max-content}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { lightRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ColorSchemeLightDirective), { isSignal: true }] }], darkRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ColorSchemeDarkDirective), { isSignal: true }] }], colorSchemeChanged: [{ type: i0.Output, args: ["colorSchemeChanged"] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { COLOR_SCHEME_LOCAL_KEY, ColorSchemeDarkDirective, ColorSchemeLightDirective, ColorSchemeStore, ColorSchemeSwitcher };
//# sourceMappingURL=ngstarter-ui-components-color-scheme.mjs.map
