import * as i0 from '@angular/core';
import { EventEmitter, Directive, Input, Output, HostBinding } from '@angular/core';
import * as i1 from '@ironsource/fusion-ui/services/unique-id';
import { BehaviorSubject, of, Subject, combineLatest } from 'rxjs';
import * as i2 from '@angular/platform-browser';
import { delay, startWith, takeUntil } from 'rxjs/operators';
import { isString } from '@ironsource/fusion-ui/utils';

class ToggleBaseComponent {
    set label(label) {
        this._label = label;
        this.setLabel(this._label);
    }
    get label() {
        return this._label;
    }
    set isDisabled(value) {
        this.isDisabledInput$.next(value);
    }
    get customBGColor() {
        return !!this.customCheckedBackgroundColor
            ? this.sanitizer.bypassSecurityTrustStyle(`--checked-bg-color: ${this.customCheckedBackgroundColor}`)
            : this.elementRef.nativeElement.getAttribute('style');
    }
    constructor(uniqueIdService, sanitizer, elementRef) {
        this.uniqueIdService = uniqueIdService;
        this.sanitizer = sanitizer;
        this.elementRef = elementRef;
        this.model = false;
        this.size = 'medium';
        this.modelChange = new EventEmitter();
        this.isChecked$ = new BehaviorSubject(false);
        this.isDisabled$ = new BehaviorSubject(false);
        this.isDisabledInput$ = new BehaviorSubject(false);
        this.isDisabledFormControl$ = new BehaviorSubject(false);
        /**
         * fix for issue https://github.com/ironSource/fusion-ui/issues/121
         * we will add animated classes after initial hrml will be rendered.
         * So, in this case will not animation on component render.
         */
        this.animated$ = of(true).pipe(delay(500), startWith(false));
        this.onDestroy$ = new Subject();
        // Implement ControlValueAccessor methods
        /**
         * Method to call when value has changes.
         */
        this.propagateChange = (_) => { };
        /**
         * Method to call when the component is touched (when it was is clicked).
         */
        this.propagateTouched = () => { };
    }
    ngOnInit() {
        this.id = 'is-toggle-' + this.uniqueIdService.getUniqueId();
        this.value = this.value || '';
        combineLatest([this.isDisabledFormControl$.asObservable(), this.isDisabledInput$.asObservable()])
            .pipe(takeUntil(this.onDestroy$))
            .subscribe(([isDisabledInput, isDisabledFormControl]) => this.isDisabled$.next(isDisabledInput || isDisabledFormControl));
    }
    ngOnDestroy() {
        this.onDestroy$.next();
        this.onDestroy$.complete();
    }
    onChange(event) {
        this.model = event;
        this.isChecked$.next(this.model);
        this.propagateChange(event);
        this.modelChange.emit(Boolean(event));
        this.setLabel(this.label);
    }
    setLabel(label) {
        if (isString(label)) {
            this.currentLabel = label;
        }
        else if (!!label && label.hasOwnProperty('on')) {
            this.currentLabel = this.model ? label?.on : label?.off;
        }
    }
    /**
     * update value from model to the component
     */
    writeValue(value) {
        if (value === undefined || value === null) {
            this.model = false;
        }
        else {
            this.model = value;
        }
        this.isChecked$.next(this.model);
        this.setLabel(this.label);
    }
    /**
     * Informs the outside world about changes.
     * see method propagateChange call - this.propagateChange(this.model);
     */
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    /**
     * Component was Touched
     */
    registerOnTouched(fn) {
        this.propagateTouched = fn;
    }
    /**
     * on set form controll enabled / disabled
     * also do UI Component enabled / disabled
     */
    setDisabledState(isDisabled) {
        this.isDisabledFormControl$.next(isDisabled);
    }
    static { this.ɵfac = function ToggleBaseComponent_Factory(t) { return new (t || ToggleBaseComponent)(i0.ɵɵdirectiveInject(i1.UniqueIdService), i0.ɵɵdirectiveInject(i2.DomSanitizer), i0.ɵɵdirectiveInject(i0.ElementRef)); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ToggleBaseComponent, hostVars: 1, hostBindings: function ToggleBaseComponent_HostBindings(rf, ctx) { if (rf & 2) {
            i0.ɵɵattribute("style", ctx.customBGColor, i0.ɵɵsanitizeStyle);
        } }, inputs: { label: "label", value: "value", name: "name", isDisabled: "isDisabled", loading: "loading", model: "model", size: "size", customCheckedBackgroundColor: "customCheckedBackgroundColor" }, outputs: { modelChange: "modelChange" } }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToggleBaseComponent, [{
        type: Directive
    }], () => [{ type: i1.UniqueIdService }, { type: i2.DomSanitizer }, { type: i0.ElementRef }], { label: [{
            type: Input
        }], value: [{
            type: Input
        }], name: [{
            type: Input
        }], isDisabled: [{
            type: Input
        }], loading: [{
            type: Input
        }], model: [{
            type: Input
        }], size: [{
            type: Input
        }], customCheckedBackgroundColor: [{
            type: Input
        }], modelChange: [{
            type: Output
        }], customBGColor: [{
            type: HostBinding,
            args: ['attr.style']
        }] }); })();

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

export { ToggleBaseComponent };
//# sourceMappingURL=ironsource-fusion-ui-components-toggle-common-base.mjs.map
