import { Component, Input } from '@angular/core';
import { Router } from '@angular/router';
import { getAbstractVariableOrError, LibError } from '@iotize/ionic';
import { AbstractVariable, TapVariable } from '@iotize/tap/data';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/common";
import * as i3 from "@ionic/angular";
import * as i4 from "../monitoring-variable-value/monitoring-variable-value.component";
import * as i5 from "../tap-variable-range/tap-variable-range.component";
import * as i6 from "../tap-variable-buttons/tap-variable-buttons.component";
import * as i7 from "../tap-variable-toggle/tap-variable-toggle.component";
import * as i8 from "../tap-variable-select/tap-variable-select.component";
export class VariableCardComponent {
    // private _switchButtonSubscription?: Subscription;
    set variable(variable) {
        // console.log('VariableCardComponent', 'SET VARIABLE', variable);
        this._variable = variable;
        if (this._subscription) {
            this._subscription.unsubscribe();
        }
        this._subscription = variable.values.subscribe({
            next: (value) => {
                if (this.refreshValues) {
                    this.value = value;
                }
            },
            error: (error) => {
                // console.warn(`Monitoring error: `, error);
                this.error = error;
            },
            complete: () => {
                // console.warn('VariableCardComponent', 'values observable is complete')
            },
        });
    }
    get variable() {
        return getAbstractVariableOrError(this._variable);
    }
    constructor(router) {
        this.router = router;
        this.waitForSubmit = false;
        this.cardType = 'text';
        this.cardTypes = [
            // 'chart',
            'gauge',
            'switch',
            'text',
            'buttons',
            'range',
            'select',
        ];
        this.editMode = false;
        this.monitor = true;
        this.showStartStopMonitoring = false;
        this.unit = '';
        this.bundleName = '...';
        this.value = 'Unknown';
        this.refreshValues = false;
        this.monitoringButtons = [0, 1, 2, 3, 4, 5].map((v) => {
            return {
                label: `${v}`,
                value: v,
            };
        });
        this.selectOptions = [0, 1, 2, 3, 4, 5].map((v) => {
            return {
                key: v,
                text: `Value ${v}`,
            };
        });
    }
    get variableConfig() {
        if (this._variable instanceof TapVariable) {
            return this._variable.context.config;
        }
        return undefined;
    }
    // editConfig() {
    //   this.router.navigate(['/device/monitoring/add']);
    // }
    async switchButtonToggleAction(checked) {
        if (!this._variable) {
            throw LibError.componentArgumentRequired('VariableCardComponent', 'variable');
        }
        const value = checked ? 1 : 0;
        await this._variable.write(value);
        // .catch((error) => {
        //   console.warn(`Cannot write ${this._variable.identifier()}: ${error}`)
        //   this.error = error;
        // })
    }
    // onEditEvent(event: MonitoringEditTextEvent) {
    //   console.log('EDIT EVENT => ', event);
    //   switch (event.type) {
    //     case 'CLOSE':
    //       this.editMode = false;
    //       break;
    //     case 'WRITE_SUCCESS':
    //       this.editMode = false;
    //       break;
    //   }
    // }
    ngOnDestroy() {
        if (this._subscription) {
            this._subscription.unsubscribe();
        }
        // if (this._switchButtonSubscription) {
        //   this._switchButtonSubscription.unsubscribe();
        // }
    }
    onCardTypeChange($event) {
        // console.log('onCardTypeChange', $event);
        // this.cardType = $event.detail.value;
    }
    toggleMonitoring() {
        // if (this.monitor) {
        // if (!this._variable) {
        //   throw LibError.componentArgumentRequired('VariableCardComponent', 'variable');
        // }
        this.refreshValues = !this.refreshValues;
        // if (this.refreshValues) {
        //   // console.log('Start monitoring with period: ', this.monitoringPeriod);
        //   this._variable.monitor().start({
        //     forceChange: false,
        //     period: this.monitoringPeriod
        //   });
        // } else {
        //   // console.log('Pause monitoring');
        //   this._variable.monitor().pause();
        // }
        // }
    }
}
/** @nocollapse */ VariableCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VariableCardComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ VariableCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: VariableCardComponent, selector: "app-variable-card", inputs: { cardType: "cardType", cardTypes: "cardTypes", editMode: "editMode", monitor: "monitor", showStartStopMonitoring: "showStartStopMonitoring", unit: "unit", bundleName: "bundleName", variable: "variable" }, ngImport: i0, template: "<ion-card *ngIf=\"_variable\">\n  <ion-item lines=\"none\">\n    <ion-label slot=\"start\">{{ bundleName }}</ion-label>\n    <ion-label slot=\"end\">#{{ _variable.id }}</ion-label>\n  </ion-item>\n  <!-- <ion-item>\n    <ion-icon *ngIf=\"icon\" name=\"{{icon}}\" slot=\"start\"></ion-icon>\n    <ion-label>{{variable.identifier() || variableConfig.id }}</ion-label>\n  </ion-item> -->\n  <ion-card-content *ngIf=\"monitor\">\n    <ng-container [ngSwitch]=\"cardType\">\n      <ion-item *ngSwitchCase=\"'text'\" lines=\"none\" class=\"ion-no-padding\">\n        <monitoring-variable-value\n          style=\"margin: auto\"\n          [lines]=\"'none'\"\n          [variable]=\"variable\"\n          [editable]=\"editMode\"\n        ></monitoring-variable-value>\n        <span slot=\"end\" *ngIf=\"unit\" class=\"unit\">{{ unit }}</span>\n      </ion-item>\n      <ion-item *ngSwitchCase=\"'select'\" lines=\"none\" class=\"ion-no-padding\">\n        <tap-variable-select\n          style=\"margin: auto\"\n          [lines]=\"'none'\"\n          [variable]=\"variable\"\n          [options]=\"selectOptions\"\n          [editable]=\"editMode\"\n        ></tap-variable-select>\n        <span slot=\"end\" *ngIf=\"unit\" class=\"unit\">{{ unit }}</span>\n      </ion-item>\n      <tap-variable-toggle\n        *ngSwitchCase=\"'switch'\"\n        [variable]=\"_variable\"\n      ></tap-variable-toggle>\n      <tap-variable-buttons\n        *ngSwitchCase=\"'buttons'\"\n        [variable]=\"variable\"\n        [buttons]=\"monitoringButtons\"\n      ></tap-variable-buttons>\n      <tap-variable-range\n        *ngSwitchCase=\"'range'\"\n        [variable]=\"_variable\"\n        [pin]=\"true\"\n        [snaps]=\"true\"\n        [ticks]=\"true\"\n        [min]=\"0\"\n        [max]=\"100\"\n      ></tap-variable-range>\n      <ion-text color=\"danger\" *ngSwitchDefault>\n        <ion-icon name=\"alert\"></ion-icon> Unknown card type {{ cardType }}\n      </ion-text>\n    </ng-container>\n  </ion-card-content>\n  <ion-card-content *ngIf=\"error\">\n    <ion-text color=\"danger\">{{ error }}</ion-text>\n  </ion-card-content>\n  <!--\n  <ion-item>\n    <ion-select\n      [(ngModel)]=\"cardType\"\n      okText=\"Select\"\n      cancelText=\"Dismiss\"\n      (ionChange)=\"onCardTypeChange($event)\"\n    >\n      <ion-select-option\n        *ngFor=\"let cardType of cardTypes\"\n        value=\"{{ cardType }}\"\n        >{{ cardType }}</ion-select-option\n      >\n    </ion-select>\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"toggleMonitoring()\" *ngIf=\"showStartStopMonitoring\">\n        <ion-icon *ngIf=\"!playMonitoring\" name=\"play\"></ion-icon>\n        <ion-icon *ngIf=\"playMonitoring\" name=\"pause\"></ion-icon>\n      </ion-button>\n      <ion-button (click)=\"editMode = !editMode\">\n        <ion-icon *ngIf=\"!editMode\" name=\"create\"></ion-icon> <span *ngIf=\"!editMode\"></span>\n        <ion-icon *ngIf=\"editMode\" name=\"close\"></ion-icon> \n      </ion-button>\n      <ion-button (click)=\"editConfig()\">\n        \n        <ion-icon name=\"cog\"></ion-icon> \n      </ion-button>\n    </ion-buttons>\n  </ion-item>\n  -->\n</ion-card>\n", styles: [".variable-value{font-size:1.4em;font-weight:700}ion-card-content{text-align:center}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i4.MonitoringVariableValueComponent, selector: "monitoring-variable-value", inputs: ["lines", "unitValue", "error", "variable", "config", "inputOptions", "editable", "modalEdition", "valueStyle", "digitsInfo", "refreshable", "valueFormatting"] }, { kind: "component", type: i5.TapVariableRangeComponent, selector: "tap-variable-range", inputs: ["variable", "editable", "writeValueForEveryChange", "min", "max", "step", "color", "pin", "snaps", "ticks", "debounce", "leftIcon", "leftIconColor", "rightIcon", "rightIconColor", "value"], outputs: ["valueChange"] }, { kind: "component", type: i6.TapVariableButtonsComponent, selector: "tap-variable-buttons", inputs: ["variable", "editable", "color", "segment", "buttons"] }, { kind: "component", type: i7.TapVariableToggleComponent, selector: "tap-variable-toggle", inputs: ["textOnLeft", "textOnRight", "lines", "toggleColor", "variable", "editable", "valueOn", "valueOff", "chip"] }, { kind: "component", type: i8.TapVariableSelectComponent, selector: "tap-variable-select", inputs: ["variable", "value", "editable", "refreshable", "multiple", "lines", "options"], outputs: ["valueChange"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VariableCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-variable-card', template: "<ion-card *ngIf=\"_variable\">\n  <ion-item lines=\"none\">\n    <ion-label slot=\"start\">{{ bundleName }}</ion-label>\n    <ion-label slot=\"end\">#{{ _variable.id }}</ion-label>\n  </ion-item>\n  <!-- <ion-item>\n    <ion-icon *ngIf=\"icon\" name=\"{{icon}}\" slot=\"start\"></ion-icon>\n    <ion-label>{{variable.identifier() || variableConfig.id }}</ion-label>\n  </ion-item> -->\n  <ion-card-content *ngIf=\"monitor\">\n    <ng-container [ngSwitch]=\"cardType\">\n      <ion-item *ngSwitchCase=\"'text'\" lines=\"none\" class=\"ion-no-padding\">\n        <monitoring-variable-value\n          style=\"margin: auto\"\n          [lines]=\"'none'\"\n          [variable]=\"variable\"\n          [editable]=\"editMode\"\n        ></monitoring-variable-value>\n        <span slot=\"end\" *ngIf=\"unit\" class=\"unit\">{{ unit }}</span>\n      </ion-item>\n      <ion-item *ngSwitchCase=\"'select'\" lines=\"none\" class=\"ion-no-padding\">\n        <tap-variable-select\n          style=\"margin: auto\"\n          [lines]=\"'none'\"\n          [variable]=\"variable\"\n          [options]=\"selectOptions\"\n          [editable]=\"editMode\"\n        ></tap-variable-select>\n        <span slot=\"end\" *ngIf=\"unit\" class=\"unit\">{{ unit }}</span>\n      </ion-item>\n      <tap-variable-toggle\n        *ngSwitchCase=\"'switch'\"\n        [variable]=\"_variable\"\n      ></tap-variable-toggle>\n      <tap-variable-buttons\n        *ngSwitchCase=\"'buttons'\"\n        [variable]=\"variable\"\n        [buttons]=\"monitoringButtons\"\n      ></tap-variable-buttons>\n      <tap-variable-range\n        *ngSwitchCase=\"'range'\"\n        [variable]=\"_variable\"\n        [pin]=\"true\"\n        [snaps]=\"true\"\n        [ticks]=\"true\"\n        [min]=\"0\"\n        [max]=\"100\"\n      ></tap-variable-range>\n      <ion-text color=\"danger\" *ngSwitchDefault>\n        <ion-icon name=\"alert\"></ion-icon> Unknown card type {{ cardType }}\n      </ion-text>\n    </ng-container>\n  </ion-card-content>\n  <ion-card-content *ngIf=\"error\">\n    <ion-text color=\"danger\">{{ error }}</ion-text>\n  </ion-card-content>\n  <!--\n  <ion-item>\n    <ion-select\n      [(ngModel)]=\"cardType\"\n      okText=\"Select\"\n      cancelText=\"Dismiss\"\n      (ionChange)=\"onCardTypeChange($event)\"\n    >\n      <ion-select-option\n        *ngFor=\"let cardType of cardTypes\"\n        value=\"{{ cardType }}\"\n        >{{ cardType }}</ion-select-option\n      >\n    </ion-select>\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"toggleMonitoring()\" *ngIf=\"showStartStopMonitoring\">\n        <ion-icon *ngIf=\"!playMonitoring\" name=\"play\"></ion-icon>\n        <ion-icon *ngIf=\"playMonitoring\" name=\"pause\"></ion-icon>\n      </ion-button>\n      <ion-button (click)=\"editMode = !editMode\">\n        <ion-icon *ngIf=\"!editMode\" name=\"create\"></ion-icon> <span *ngIf=\"!editMode\"></span>\n        <ion-icon *ngIf=\"editMode\" name=\"close\"></ion-icon> \n      </ion-button>\n      <ion-button (click)=\"editConfig()\">\n        \n        <ion-icon name=\"cog\"></ion-icon> \n      </ion-button>\n    </ion-buttons>\n  </ion-item>\n  -->\n</ion-card>\n", styles: [".variable-value{font-size:1.4em;font-weight:700}ion-card-content{text-align:center}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { cardType: [{
                type: Input
            }], cardTypes: [{
                type: Input
            }], editMode: [{
                type: Input
            }], monitor: [{
                type: Input
            }], showStartStopMonitoring: [{
                type: Input
            }], unit: [{
                type: Input
            }], bundleName: [{
                type: Input
            }], variable: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 