// Angular imports //
import { Component, OnInit } from '@angular/core';
import { downgradeComponent } from '@angular/upgrade/static';
declare const angular: angular.IAngularStatic;

// Components //

// Interfaces //

// Services //

// Directives //

// Todo importera styles enligt wiki / vile
@Component({
    selector: 'fb-forms-exempel',
    templateUrl: './fb-forms-exempel.component.html',
})
export class FbFormsExempelComponent implements OnInit {

    dropPlusModel: fb.ChangeTrack<string>;

    dropdownData: fb.ChangeTrack<number> = new fb.ChangeTrack(null);
    dropdownWithValueData: fb.ChangeTrack<number> = new fb.ChangeTrack(1);
    dropdownRequiredData: fb.ChangeTrack<number> = new fb.ChangeTrack(null);
    dropdownOptions: { Id: number, Name: string }[];

    radiobuttonGroupData: fb.ChangeTrack<number> = new fb.ChangeTrack(null);
    radiobuttonGroupWithValueData: fb.ChangeTrack<number> = new fb.ChangeTrack(1);
    radiobuttonGroupOptions: { Id: number, Name: string }[];

    checkboxData: fb.ChangeTrack<boolean> = new fb.ChangeTrack(false);
    checkboxWithValueData: fb.ChangeTrack<boolean> = new fb.ChangeTrack(true);

    textValue: fb.ChangeTrack<string> = new fb.ChangeTrack('Inputfält med ifyllt värde');
    textMissValue: fb.ChangeTrack<string> = new fb.ChangeTrack('');
    textValueWithError: fb.ChangeTrack<string> = new fb.ChangeTrack('Fälstuvad taxt');
    textValueTight: fb.ChangeTrack<string> = new fb.ChangeTrack('Inputfält tight med värde');


    textRequiredValue: fb.ChangeTrack<string> = new fb.ChangeTrack('Required med ifyllt värde');
    textRequiredMissValue: fb.ChangeTrack<string> = new fb.ChangeTrack('');
    textMaxLengthValue: fb.ChangeTrack<string> = new fb.ChangeTrack('En alldeles för lång text för fältet');

    numberValue: fb.ChangeTrack<number> = new fb.ChangeTrack(2450000);
    postnrValue: fb.ChangeTrack<number> = new fb.ChangeTrack(12345);
    ocrValue: fb.ChangeTrack<string> = new fb.ChangeTrack('426523791');
    floatValue: fb.ChangeTrack<number> = new fb.ChangeTrack(10.111);
    telefonnummerValue: fb.ChangeTrack<string> = new fb.ChangeTrack('+461234567');
    epostValue: fb.ChangeTrack<string> = new fb.ChangeTrack('thomas.wallin@sfitpoc.se');
    tid: fb.ChangeTrack<string> = new fb.ChangeTrack('2017-06-09T12:00:30');

    dateValue: fb.ChangeTrack<string> = new fb.ChangeTrack('2017-06-09T00:00:00');

    inputTypeahead: any = {
        options0: [{ name: 'Fritidshus', id: 1, typ: 'Fristående' },
        { name: 'Villa', id: 2, typ: 'Fristående' },
        { name: 'Radhus', id: 3, typ: 'Sammanhängande' },
        { name: 'Brf', id: 4, typ: 'Sammanhängande' },
        { name: 'Kommersiell fastighet', id: 5, typ: 'Sammanhängande' },
        ],
        model0: new fb.ChangeTrack(null),
        options1: [
            new fb.ResourceBase({ name: 'TV-möbel', id: 1, sortByThis: '1' }, true),
            new fb.ResourceBase({ name: 'Köksbord', id: 2, sortByThis: '4' }, true),
            new fb.ResourceBase({ name: 'Vitrinskåp', id: 3, sortByThis: '3' }, true),
            new fb.ResourceBase({ name: 'Nattduksbord', id: 4, sortByThis: '2' }, true)
        ],
        model1: new fb.ChangeTrack(1),
        model2: new fb.ChangeTrack('Annat värde'),
        optiongroupNameFn: (opt: string) => opt,
        onBlur: () => console.log('typeahead blur')
    };

    inputMultiSelect: any = {
        options0: [{ name: 'Fritidshus', id: 1, typ: 'Fristående' },
            { name: 'Villa', id: 2, typ: 'Fristående' },
            { name: 'Radhus', id: 3, typ: 'Sammanhängande' },
            { name: 'Brf', id: 4, typ: 'Sammanhängande' },
            { name: 'Kommersiell fastighet', id: 5, typ: 'Sammanhängande' },
        ],
        model0: []
    };

    fbPopoverData: any;

    ngOnInit(): void {
        this.initDropdown();
        this.initRadiobuttonGroup();
        this.initForm();
        this.initDropPlus();
        this.initPopover();
    }

    private initPopover(): void {
        this.fbPopoverData = {
            title: 'o0o0ops!',
            text: 'w0oh0o!',
            subText: 'subText',
            placement: 'align-right',
            delete: () => console.log('%cDeleted!', 'color: red; font-size: x-large'),
            show: false
        };
    }

    private initDropPlus(): void {
        this.dropPlusModel = new fb.ChangeTrack('test');
    }

    private initDropdown(): void {
        this.dropdownRequiredData.required = true;
        this.dropdownOptions = [];
        this.dropdownOptions.push({ Id: 1, Name: 'ABC' });
        this.dropdownOptions.push({ Id: 2, Name: 'Ett val' });
        this.dropdownOptions.push({ Id: 3, Name: 'Ett annat val' });
        this.dropdownOptions.push({ Id: 4, Name: 'Ett tredje val' });
    }

    private initRadiobuttonGroup(): void {
        this.radiobuttonGroupOptions = [];
        this.radiobuttonGroupOptions.push({ Id: 1, Name: 'Ett bra val' });
        this.radiobuttonGroupOptions.push({ Id: 2, Name: 'Ett annat bättre val' });
        this.radiobuttonGroupOptions.push({ Id: 3, Name: 'Ett tredje val, det bästa' });
    }

    private initForm(): void {
        this.textRequiredValue.required = true;
        this.textRequiredMissValue.required = true;
        this.textMaxLengthValue.maxLength = 20;
    }

    spaerraMobilnummer(v: boolean): void {
        console.log(`spaerraMobilnummer(${v})`);
    }

    spaerraEpost(v: boolean): void {
        console.log(`spaerraEpost(${v})`);
    }
}

// Angular downgrade ////
angular.module('fasit')
    .directive('fbFormsExempel',
    downgradeComponent({
        component: FbFormsExempelComponent,
        inputs: [],
        outputs: []
    }) as angular.IDirectiveFactory);