var _form, _subscription;
import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormControl, NgForm, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { ZuiB, ZuiFR } from '@material-zui/core';
import { REQUIRED } from '../constants';
import { ZUICheckboxService } from './index.service';
export class ZUICheckboxComponent {
    constructor(zuiCheckboxService) {
        this.zuiCheckboxService = zuiCheckboxService;
        this.name = ZuiFR.datatype.uuid();
        this.validateMsg = REQUIRED;
        /**
         * "checkbox" | "slide"
         */
        this.type = 'checkbox';
        /**
         * "primary" | "accent" | "warn"
         */
        this.status = 'primary';
        this.disabledValidate = false;
        this.indeterminate = false;
        /**
         * "before" | "after"
         */
        this.position = 'after';
        this.requiredVal = false;
        this.isCheckAll = false;
        this.disabledVal = false;
        this.disabledSelectVal = false;
        this.allowToggle = true;
        _form.set(this, void 0);
        this.modelChange = new EventEmitter();
        this.indeterminateChange = new EventEmitter();
        _subscription.set(this, new Subscription());
        this.formControl = new FormControl();
        this.onIndeterminateChange = (value) => {
            this.indeterminateChange.emit(value);
        };
        this.onChange = (value) => {
            if (this.groupName) {
                if (this.isCheckAll) {
                    this.zuiCheckboxService.changeAll(this.groupName, value);
                }
                else {
                    this.zuiCheckboxService.change({ name: this.name, groupName: this.groupName, value });
                }
            }
        };
    }
    set required(val) {
        this.requiredVal = ZuiB.toBool(val);
    }
    set checkAll(val) {
        this.isCheckAll = ZuiB.toBool(val);
    }
    set disabled(val) {
        this.disabledVal = ZuiB.toBool(val);
    }
    /**
     * disable select text
     */
    set disabledSelect(val) {
        this.disabledSelectVal = ZuiB.toBool(val);
    }
    set disabledToggle(val) {
        this.allowToggle = ZuiB.toBoolReverse(val);
    }
    set model(value) {
        this.formControl.setValue(value);
        // if (this.groupName) {
        //   if (this.isCheckAll) {
        //     this.zuiCheckboxService.addControlCheckAll(this)
        //   } else {
        //     // console.log('ngAfterViewInit', this.name, this.formControl.value)
        //     this.zuiCheckboxService.addControl({groupName: this.groupName, formControl: this.formControl, name: this.name})
        //     this.zuiCheckboxService.change({name: this.name, groupName: this.groupName, value: this.formControl.value})
        //   }
        // }
    }
    set form(val) {
        if (val) {
            if (val instanceof NgForm) {
                __classPrivateFieldSet(this, _form, val.form);
            }
            else {
                __classPrivateFieldSet(this, _form, val);
            }
        }
    }
    ngOnInit() {
        __classPrivateFieldGet(this, _subscription).add(this.formControl.valueChanges.subscribe(value => {
            this.modelChange.emit(!!value);
        }));
    }
    ngOnChanges() {
        this.formControl.clearValidators();
        const validators = [];
        if (this.requiredVal)
            validators.push(Validators.requiredTrue);
        this.formControl.setValidators(validators);
        if (this.disabledVal)
            this.formControl.disable();
        if (!this.status)
            this.status = 'primary';
        if (!this.rippleColor)
            this.rippleColor = this.color;
    }
    ngAfterViewInit() {
        var _a;
        (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(this.name, this.formControl);
        if (this.groupName) {
            if (this.isCheckAll) {
                this.zuiCheckboxService.addControlCheckAll(this);
            }
            else {
                this.zuiCheckboxService.addControl({ groupName: this.groupName, formControl: this.formControl, name: this.name });
                // this.zuiCheckboxService.change({name: this.name, groupName: this.groupName, value: this.formControl.value})
            }
        }
    }
    ngOnDestroy() {
        __classPrivateFieldGet(this, _subscription).unsubscribe();
        if (this.groupName)
            this.zuiCheckboxService.removeControl(this.groupName, this.name);
    }
}
_form = new WeakMap(), _subscription = new WeakMap();
ZUICheckboxComponent.decorators = [
    { type: Component, args: [{
                selector: 'zui-checkbox',
                template: "<div class=\"d-inline-flex flex-column\">\n  <ng-container *ngIf=\"type === 'checkbox'\">\n    <ng-container *ngIf=\"color\">\n      <mat-checkbox\n        style=\"--c: {{ color }}; --cRipple: {{ rippleColor }}\"\n        class=\"zui-checkbox-color\"\n        [formControl]=\"formControl\"\n        [labelPosition]=\"position\"\n        [indeterminate]=\"indeterminate\"\n        (indeterminateChange)=\"onIndeterminateChange($event)\"\n        (change)=\"onChange($event.checked)\"\n      >\n        {{ label }}\n      </mat-checkbox>\n      <mat-error *ngIf=\"!disabledValidate && formControl?.hasError('required')\" class=\"zui-checkbox-error\">{{ validateMsg }}</mat-error>\n    </ng-container>\n    <ng-container *ngIf=\"!color && status\">\n      <mat-checkbox\n        [formControl]=\"formControl\"\n        [labelPosition]=\"position\"\n        [color]=\"status\"\n        [indeterminate]=\"indeterminate\"\n        (indeterminateChange)=\"onIndeterminateChange($event)\"\n        (change)=\"onChange($event.checked)\"\n      >\n        {{ label }}\n      </mat-checkbox>\n      <mat-error *ngIf=\"!disabledValidate && formControl?.hasError('required')\" class=\"zui-checkbox-error\">{{ validateMsg }}</mat-error>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"type === 'slide'\">\n    <ng-container *ngIf=\"color\">\n      <mat-slide-toggle\n        style=\"--c: {{ color }}\"\n        class=\"zui-checkbox-color\"\n        [class.zui-noselect]=\"disabledSelectVal\"\n        [formControl]=\"formControl\"\n        [labelPosition]=\"position\"\n        (change)=\"onChange($event.checked)\"\n      >\n        {{ label }}\n      </mat-slide-toggle>\n      <mat-error *ngIf=\"!disabledValidate && formControl?.hasError('required')\" class=\"zui-checkbox-error mt-2\">{{ validateMsg }}</mat-error>\n    </ng-container>\n    <ng-container *ngIf=\"!color && status\">\n      <mat-slide-toggle [class.zui-noselect]=\"disabledSelectVal\" [formControl]=\"formControl\" [labelPosition]=\"position\" [color]=\"status\" (change)=\"onChange($event.checked)\">{{ label }}</mat-slide-toggle>\n      <mat-error *ngIf=\"!disabledValidate && formControl?.hasError('required')\" class=\"zui-checkbox-error mt-2\">{{ validateMsg }}</mat-error>\n    </ng-container>\n  </ng-container>\n</div>\n",
                styles: [".zui-checkbox-error{font-size:12px;margin-top:-7px}:host ::ng-deep .zui-checkbox-color.mat-checkbox-checked.mat-accent .mat-checkbox-background,:host ::ng-deep .zui-checkbox-color.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background{background-color:var(--c)!important}:host ::ng-deep .zui-checkbox-color .mat-checkbox-ripple .mat-ripple-element{background-color:var(--cRipple)!important}:host ::ng-deep .zui-checkbox-color.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar,:host ::ng-deep .zui-checkbox-color.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb{background-color:var(--c)!important}"]
            },] }
];
ZUICheckboxComponent.ctorParameters = () => [
    { type: ZUICheckboxService }
];
ZUICheckboxComponent.propDecorators = {
    label: [{ type: Input }],
    name: [{ type: Input }],
    validateMsg: [{ type: Input }],
    groupName: [{ type: Input }],
    type: [{ type: Input }],
    status: [{ type: Input }],
    color: [{ type: Input }],
    rippleColor: [{ type: Input }],
    disabledValidate: [{ type: Input }],
    indeterminate: [{ type: Input }],
    position: [{ type: Input }],
    required: [{ type: Input }],
    checkAll: [{ type: Input }],
    disabled: [{ type: Input }],
    disabledSelect: [{ type: Input }],
    disabledToggle: [{ type: Input }],
    model: [{ type: Input }],
    form: [{ type: Input }],
    modelChange: [{ type: Output }],
    indeterminateChange: [{ type: Output }]
};
//# sourceMappingURL=index.component.js.map