import { Component, ViewChild } from '@angular/core';
import { INbpButton, NbpBaseComponent, NbpButtonIconPosition, NbpDataSource, NbpSize, NbpStyle } from '@isp/xdce-widget';

@Component({
    selector: 'showcase',
    templateUrl: './showcase.component.html',
    styleUrls: ['./showcase.component.scss']
})
export class ShowcaseComponent extends NbpBaseComponent {
    _nbpStyle = NbpStyle;
    _iconPosition = NbpButtonIconPosition;
    _nbpSize = NbpSize;
    _size: NbpSize;
    isSidePopupOpen = false;

    openSidePopup() {
        this.isSidePopupOpen = true;
    }

    closeSidePopup() {
        this.isSidePopupOpen = false;
    }

    radioModelDefault = 'R-DEF';
    radioModelPrimary = 'R-PRI';

    accordionTitle: string = "Avviso PB";
    accordionString: string = "Sono una stringa";
    tooltipFlag: boolean = true;
    accordionTooltip: string = '';
    tooltipVisibility: string = '';
    tooltipIcona: string = '';

    tooltipTitle: string = 'Title';
    tooltipText: string = 'Lorem ipsum';
    tooltipIcon: string = 'ispv2-font-circle-info';
    positions = ['Top', 'Bottom', 'Left', 'Right'];

    constructor() {
        super()
    }

    @ViewChild('defModale1')
    _modalDef1: any;
    @ViewChild('secButtModale1')
    _secButtModale1: any;

    singleButton: INbpButton[] = [
        {
            id: "ok",
            label: "Ok",
            disabled: false,
            visible: true,
            style: NbpStyle.PRIMARY,
            tabindex: 0,
        }
    ];

    twoButton: INbpButton[] = [
        {
            id: "ko",
            label: "Annulla",
            disabled: false,
            visible: true,
            style: NbpStyle.SECONDARY,
            tabindex: 0
        },
        {
            id: "ok",
            label: "Conferma",
            disabled: false,
            visible: true,
            style: NbpStyle.PRIMARY,
            tabindex: 0
        }
    ];

    _openModal(modalComponent: any, size: NbpSize, style: NbpStyle) {
        this._size = size;
        modalComponent.open();
    }

    onButtonClicked(button: any) {
        if (button['id'] === 'ko') {
            this._secButtModale1.close();
        }

        if (button['id'] === 'ok') {
            alert("ok");
            this._modalDef1.close();
            this._secButtModale1.close();
        }
    }

    values = [
        "First item",
        "Second item",
        "Third item",
        "Fourth item",
        "Fifth item",
        "Sixth item"
    ];

    datasource = new NbpDataSource<string>(this.values);

    selectedValues: Array<string> = [];

    cardTitle = 'Card Title';
    cardDescr = 'Card Description';
    nbpButtons: Array<INbpButton> = [
        {
            id: "portfolio",
            label: "Portfolio",
            disabled: false,
            visible: true,
            tabindex: 0,
            style: NbpStyle.DEFAULT
        },
        {
            id: "assets",
            label: "Assets",
            disabled: false,
            visible: true,
            tabindex: 0,
            style: NbpStyle.DEFAULT
        },
        {
            id: "pippo",
            label: "Pippo",
            disabled: false,
            visible: true,
            tabindex: 0,
            style: NbpStyle.DEFAULT
        }
    ];
}