//TS


import { Component, OnInit } from "@angular/core";
import { Http, Response } from '@angular/http';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import "rxjs/add/operator/map";
import { FAQ } from "./FAQ";
import { Meldinger } from "./meldinger";
import { Kategori } from "./kategori";
import { InnsendtSporsmaal } from "./innsendtSporsmaal";
import { Headers } from "@angular/http";

@Component({
    selector: "min-app",
    templateUrl: "./app/VisKunder.html"
})
export class VisAlleSporsmaal {
    visForside: boolean;
    feilMelding: string;
    menyKnapper: boolean;
    visMeldinger: boolean;
    visSkjemaKnapp: boolean;
    visKnapper: boolean;
    visSkjema: boolean;
    visListe: boolean;
    visBekreftelse: boolean;
    public alleSporsmaal: Array<Kategori>;
    public alleMeldinger: Array<Meldinger>;
    public skjemaStatus: String;
    skjema: FormGroup;
    public laster: string;
    public sporsmaal: string;
    // public sporsmaalArray: Array<InnsendtSporsmaal> = [];
   public kategoriNavn: string


    constructor(private _http: Http, private fb: FormBuilder) {
        this.skjema = fb.group({
            id: [""],
            sporsmaal: [null, Validators.compose([Validators.required, Validators.pattern("[0-9a-zA-ZøæåØÆÅ\\-. ]{2,30}")])],
            kategori: [null, Validators.required],
            epost: [null, Validators.compose([Validators.required, Validators.pattern("[0-9a-zA-ZøæåØÆÅ\\-. ]{2,30}")])],
        });
    }

    ngOnInit() {
        this.visForside = true;
        this.visListe = false;
        this.visSkjema = false;
        this.visBekreftelse = false;
        this.visKnapper = true;
        this.visMeldinger = false;
        this.hentAlleSporsmaal();
        this.skjema.reset(true);
    }


    visKategoriSporsmaal(innNavn: string) {
        this.visSkjemaKnapp = true;
        this.visListe = true;
        if (this.kategoriNavn == innNavn) {
            this.kategoriNavn = "";

        }
        else {
            this.kategoriNavn = innNavn;
        }
    }

    visInnsendteSporsmaal() {
        this.visMeldinger = true;
        this.hentAlleMeldinger();
        this.visForside = false;
    }

    hentSporsmaal() {
        this.visListe = true;
        this.hentAlleSporsmaal();
    }

    hentSkjema() {
        this.visSkjema = true;
        this.visListe = false;
        this.visKnapper = false;
        this.visSkjemaKnapp = false;
        this.visForside = false;
    }

    vedSubmit() {
        this.lagreMelding();
        this.visSkjema = false;
        this.visBekreftelse = true;
    }

    lagreMelding() {
        var lagretMelding = new Meldinger(this.skjema.value.epost, this.skjema.value.sporsmaal, this.skjema.value.kategori);



        var body: string = JSON.stringify(lagretMelding);
        var headers = new Headers({ "Content-Type": "application/json" });

        this._http.post("api/kunde", body, { headers: headers })
            .map(returData => returData.toString())
            .subscribe(
            retur => {
                this.visForside = true;
            },
            error => this.feilMelding = error._body,
            () => console.log("ferdig post-api/kunde")
            );
    };

    hentAlleSporsmaal() {
        this.laster = "Laster inn! Vennligst vent";
        this._http.get("api/kunde/")
            .map(resultat => {
                let JsonData = resultat.json();
                return JsonData;
            })
            .subscribe(
            JsonData => {
                this.alleSporsmaal = [];
                this.laster = "";
                if (JsonData) {
                    for (let kat of JsonData) {
                        this.alleSporsmaal.push(
                            new Kategori(
                                kat.kid,
                                kat.kategoriNavn,
                                kat.faqListe,
                            ))
                    };
                };
            },
            error => alert(error),
            () => console.log("ferdig get-api/kunde")
            );
    }


    hentAlleMeldinger() {
        this.laster = "Laster inn! Vennligst vent";
        this._http.get("api/melding/")
            .map(resultat => {
                let JsonData = resultat.json();
                return JsonData;
            })
            .subscribe(
            JsonData => {
                this.alleMeldinger = [];
                this.laster = "";
                if (JsonData) {
                    for (let m of JsonData) {
                        this.alleMeldinger.push(
                            new Meldinger(
                                m.epost,
                                m.sporsmaal,
                                m.kategori,
                            ))
                    };
                };
            },
            error => alert(error),
            () => console.log("ferdig get-api/melding")
            );
    }
}




///HTML
<div class="jumbotron text-center">
    <h1>FlyApplikasjon Kundeservice</h1>
    <p>WebApplikasjoner Høst 2017.</p>
</div>



<!-----------------------------
        KATEGORIKNAPPER
------------------------------->
<div class="form-group" *ngIf="visForside">
<div *ngIf="visKnapper" class="btn-group btn-group-sm">
    <div *ngFor="let k of alleSporsmaal">
            <button class="btn btn-primary btn-lg" (click)="visKategoriSporsmaal(k.kategoriNavn)">
                {{k.kategoriNavn}}
            </button>
        </div>
    </div>

</div>


<!----------------------------
        SPØRSMÅLSLISTE
----------------------------->
<div *ngIf="visListe">
    <div *ngFor="let k of alleSporsmaal">
        <div *ngIf='kategoriNavn == k.kategoriNavn'>
            <ul class="list-group" *ngFor='let faq of k.faqListe'>

                <li class="list-group-item">{{faq.sporsmaal}}</li>

                <li class="list-group-item">{{faq.svar}}</li>
            </ul>
        </div>
    </div>
    <button class="btn btn-primary" (click)="hentSkjema()">Send inn spørsmål</button>
</div>


<!-------------------------
           SKJEMA
 ------------------------->

<div *ngIf="visSkjema">
    <h1 class="section-header"></h1>
    <form [formGroup]="skjema" (ngSubmit)="vedSubmit()" class="container">
        <div class="col-md-6 col-md-offset-1">
            <div class="form-group">
                <label>Vennligst velg Kategori:</label>
                <select class="form-control" formControlName="kategori">
                    <option *ngFor="let faq of alleSporsmaal" [value]="faq.kategoriNavn">{{faq.kategoriNavn}}</option>
                </select>
            </div>
            <div class="form-group">
                <label>Vennligst skriv inn din epost adresse:</label>
                <input class="form-control" formControlName="epost" placeholder="Skriv din epost" />
                <p class="alert alert-warning" [hidden]="skjema.controls.epost.valid || (skjema.controls.epost.pristine && !submitted)">
                    Vennligst skriv inn en gyldig E-post adresse.
                </p>
            </div>
            <div class="form-group">
                <label>Vennligst skriv inn ditt spørsmål:</label>
                <textarea class="form-control" formControlName="sporsmaal" placeholder="Skriv inn ditt spørsmål"></textarea>
                <p class="alert alert-warning" [hidden]="skjema.controls.sporsmaal.valid || (skjema.controls.sporsmaal.pristine && !submitted)">
                    Spørsmålet må være mer enn to tegn.
                </p>


            </div>
            <p>{{feilMelding}}</p> //HEr er FEILMELDINGA
            <button type="submit" class="btn btn-success" [disabled]="!skjema.valid">Send Spørsmål</button>
            <button type="button" class="btn btn-primary" (click)="ngOnInit()">Tilbake til forsiden</button>
        </div>
    </form>
</div>

<!----------------------------
       BekreftelseSkjema
------------------------------>
<div *ngIf="visBekreftelse">
    <h3>Ditt spørsmål er sendt til Kundeservice</h3>
    <button class="btn btn-success" (click)="ngOnInit()">Tilbake til forsiden</button>
    <button class="btn btn-primary" (click)="visInnsendteSporsmaal()">Vis innsendte spørsmål!</button>
</div>

<!----------------------------
        VisMeldinger
----------------------------->
 <div *ngIf="visMeldinger" class="col-md-6">
     <h4>Innsendte meldinger fra kunder</h4>
     <table class="table table-bordered">
         <thead>
             <tr>
                 <td>Kategori</td>
                 <td>Sporsmål</td>
                 <td>Epost</td>
             </tr>
         </thead>
         <tbody>
             <tr *ngFor="let melding of alleMeldinger">
                 <td>{{melding.kategori}}</td>
                 <td>{{melding.sporsmaal}}</td>
                 <td>{{melding.epost}}</td>
             </tr>
         </tbody>
     </table>
 </div>