import { Component, OnInit, Input, Inject, DoCheck, ViewEncapsulation, Output, EventEmitter, OnChanges } from '@angular/core';
import { Target } from '@overflow/commons-typescript/model/target';
import { Infra } from '@overflow/commons-typescript/model/infra';
import { MetaCrawler } from '@overflow/commons-typescript/model/meta';
import { MetaSensorDisplayItem } from '@overflow/commons-typescript/model/meta';

import { Store, select, StateObservable } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc/protocol';
import * as SensorItemKeyListStore from 'packages/sensor-item/store/key-list';
import { ReadSensorItemKeySelector } from 'packages/sensor-item/store';
import { MetaSensorItemKey } from '@overflow/commons-typescript/model/meta';
import { TreeNode } from 'primeng/primeng';

@Component({
    selector: 'of-sensor-setting',
    templateUrl: './setting.component.html',
    encapsulation: ViewEncapsulation.None
})
export class SettingComponent implements OnInit, DoCheck, OnChanges {

    @Input() preTarget: Target;
    @Output() close = new EventEmitter();
    @Input() visible;

    nextable = false;
    selectedTarget: Target;
    selectedCrawler: MetaCrawler;
    credentialPassed: boolean;
    selectedSensorDisplayItems: MetaSensorDisplayItem[];
    itemNodes: TreeNode[];
    step = 0;
    page = 1;

    sensorItemKeys$: StateObservable;


    constructor(
        private keyListStore: Store<SensorItemKeyListStore.State>
    ) {
        keyListStore.pipe(select(ReadSensorItemKeySelector.select('list')));
    }

    ngOnInit() {
        this.step = this.preTarget ? 1 : 0;
        // this.sensorItemKeys$.subscribe(
        //     (list: MetaSensorItemKey[]) => {
        //         if (list !== null) {
        //             console.log(list);
        //         }
        //     },
        //     (error: RPCClientError) => {
        //         console.log(error.response.message);
        //     }
        // );
    }

    ngOnChanges(changes) {
        this.step = this.preTarget ? 1 : 0;
    }

    ngDoCheck() {
        try {
            if (
                this.selectedTarget === null ||
                this.selectedCrawler === null ||
                this.itemNodes === null ||
                this.itemNodes.length === 0 ||
                !this.credentialPassed
            ) {
                this.nextable = false;
            } else {
                this.nextable = true;
            }
        } catch (exception) {
            this.nextable = false;
        }
    }

    onCancel() {
        this.page = 1;
        this.step = 0;
        this.visible = false;
        this.nextable = false;
        this.selectedTarget = null;
        this.selectedCrawler = null;
        this.credentialPassed = false;
        this.selectedSensorDisplayItems = null;
        this.close.emit();
    }

    onNext() {
        this.page += 1;
    }

    onPrev() {
        this.page -= 1;
    }

    onDone() {
        this.selectedSensorDisplayItems = [];
        for (const node of this.itemNodes) {
            if (node.data && node.data !== undefined) {
                this.selectedSensorDisplayItems.push(node.data);
            }
        }
        console.log(this.selectedSensorDisplayItems);
    }

    onTargetSelect(t: Target) {
        this.selectedTarget = t;
        this.step = 1;
    }
    onCrawlerSelect(c: MetaCrawler) {
        this.selectedCrawler = c;
        this.step = 2;
    }
    onCredentialPass(b: boolean) {
        if (!b) {
            return;
        }
        this.credentialPassed = b;
        this.step = 3;
    }
    onItemsSelect(nodes: TreeNode[]) {
        this.itemNodes = nodes;
    }

    onTabOpen(event) {
        this.step = event.index;
    }

    getTitle(index) {
        if (index === 0 && this.preTarget) {
            return this.preTarget.displayName;
        }
        let title = '';
        switch (index) {
            case 0:
                title = this.selectedTarget && this.step !== index ?
                    this.selectedTarget.displayName :
                    'Choose a Target to monitor.';
                break;
            case 1:
                title = this.selectedCrawler && this.step !== index ?
                    this.selectedCrawler.name :
                    'Choose a Crawler.';
                break;
            case 2:
                title = this.credentialPassed && this.step !== index ?
                    'Credentials test succeed.' :
                    'Credentials';
                break;
            case 3:
                title = 'Choose Sensor Items.';
                break;
        }
        return title;
    }
}