class Uczen {
    public Imie: string;
    public Nazwisko: string;
    public Oceny: Array<Oceny>;
    public Row: JQuery;
}
class Oceny  {
    public Przedmiot: string;
    public Ocena: number;
}


class GradeTable implements IContent {
    private UI: {  table: JQuery, tHead: JQuery, tBody: JQuery, rows: Array<JQuery> } = {  table: null, tHead: null, tBody: null, rows: [] };
    constructor(uczen: Uczen) {
        this.Prepare();
        this.buildBasics();
        this.AddRows(uczen);
    }
    public GetBody(): JQuery {

        return this.UI.table;
    }

    private Prepare(): void {
        this.UI.table = $('<table class="table">');
        this.UI.tHead = $('<thead>' +
            '<tr>' +
            '<th>#</th>' +
            '<th>Przedmiot</th>' +
            '<th>Ocena</th>' +
            '</tr>' +
            '</thead>');
        this.UI.tBody = $('<tbody>');

    }
    private buildBasics(): void {
        this.UI.table.append(this.UI.tHead);
        this.UI.table.append(this.UI.tBody);

    }
    private AddRows(uczen: Uczen): void {
        let nr: number = 1;
        for (var gradeS of uczen.Oceny) {

            let row: JQuery = $('<tr>');
            let nrOfRow: JQuery = $('<th scope="row">' + nr + '</th>');
            let przedmiot: JQuery = $('<td>' + gradeS.Przedmiot + '</td>');
            let grade: JQuery = $('<td>' + gradeS.Ocena + '</td>');
            row.append(nrOfRow, przedmiot, grade);
            this.UI.rows.push(row);
            this.UI.tBody.append(row);
            this.UI.table

            nr++;
        }

    }

} // do ModalWindow

class Dziennik {

    private placeholder: JQuery;
    private title: string='Tytuł';
    private headerTitle: string='TekstHeadera';
    private uczniowie: Array<Uczen> = null;
    private UI: { gradeBook: JQuery, panelDefault: JQuery, panelHeading: JQuery, panelBody: JQuery, table: JQuery, tHead: JQuery, tBody: JQuery, rows: Array<JQuery>, textField: JQuery } = { gradeBook: null, panelDefault: null, panelHeading: null, panelBody: null, table: null, tHead: null, tBody: null, rows: [], textField:null };





    constructor(placeholder: JQuery, title: string, headerTitle: string, uczniowie: Array<Uczen>) {
        //init
        this.placeholder = placeholder;
        this.title = title;
        this.headerTitle = headerTitle;
        this.uczniowie = uczniowie;
        this.Prepare();
        this.BuildBasics();
        this.AddRowsToTable(this.uczniowie);
    }

    public Render(): void {
        $(this.placeholder).append(this.UI.gradeBook);

    }

    private Prepare(): void {

        this.UI.gradeBook = $('<div>');
        //panel start
        this.UI.panelDefault = $('<div class="panel panel-default">');


        this.UI.panelHeading = $('<div class="panel-heading" > ' + this.title + '</div>');
        this.UI.panelBody = $('<div class="panel-body">' + this.headerTitle + '</div>');
        //panel end

        //table start
        this.UI.table = $('<table class="table">');
        this.UI.tHead = $('<thead>'+
           '<tr>'+
            '<th>#</th>'+
            '<th>Nazwisko</th>'+
            '<th>Imię</th>'+
            '<th>Średnia</th>'+
            '</tr>'+
            '</thead>');
        this.UI.tBody = $('<tbody>');

        //table end
        //textfiled
        this.UI.textField = $('<input type="text" name="search">');
        this.UI.textField.keyup(() => {
            console.log(this.UI.textField);
            this.searchInList(this.UI.textField.val());
        })

    }
    private searchInList(text: string): void {
        if (text != '') {
            $('td').parent().hide();
            $('td:contains(' + text + ')').parent().show();
        }
        else $('td').parent().show();
    }
    private BuildBasics(): void{
    //panelStart
        this.UI.panelDefault.append(this.UI.panelHeading);
        this.UI.panelDefault.append(this.UI.panelBody);
    //panelEnd

        //tableStart
        this.UI.table.append(this.UI.tHead);
        this.UI.table.append(this.UI.tBody);
        //tableEnd
        this.UI.gradeBook.append(this.UI.panelDefault, this.UI.table, this.UI.textField);


    }

    private AddRowsToTable(uczniowie: Array<Uczen>): void {

        let nr: number = 1;

        for (var uczen of uczniowie) {

            let row: JQuery = $('<tr>');
            let nrOfRow: JQuery = $('<th scope="row">' + nr + '</th>');
            let name: JQuery = $('<td>' + uczen.Imie + '</td>');
            let sureName: JQuery = $('<td>' + uczen.Nazwisko + '</td>');
            let averageGrade: JQuery = $('<td>' + this.CountAverageGrade(uczen) + '<a> szczegóły--&gt;</a></td>');
            let actualName: string = uczen.Imie + ' ' + uczen.Nazwisko;
            let ActualUczen: Uczen = uczen;
            averageGrade.click(() => {
                var gradeWindow = new CustomModal(TypeEnum.Choice, ThemeEnum.Warning, 'Oceny ucznia ' + actualName, new GradeTable(ActualUczen), null);
                gradeWindow.Render();


            });

            row.append(nrOfRow, name, sureName, averageGrade);
            this.UI.rows.push(row);
            this.UI.tBody.append(row);


            nr++;
        }

    }

    private CountAverageGrade(uczen: Uczen) :number {
        let avrGrade: number = 0;
        for (var ocena of uczen.Oceny) {
            avrGrade += ocena.Ocena;
        }
        return avrGrade / uczen.Oceny.length;
    }
}



window.onload = () => {

    var dane = [{ "Imie": "Marek", "Nazwisko": "Mazur", "Oceny": [{ "Przedmiot": "Polski", "Ocena": 2 }, { "Przedmiot": "Matematyka", "Ocena": 5 }] }, { "Imie": "Artur", "Nazwisko": "Brennek", "Oceny": [{ "Przedmiot": "Polski", "Ocena": 5 }, { "Przedmiot": "Matematyka", "Ocena": 3 }] }, { "Imie": "Dorota", "Nazwisko": "Brennek", "Oceny": [{ "Przedmiot": "Polski", "Ocena": 5 }, { "Przedmiot": "Matematyka", "Ocena": 5 }] }];


    var firstGradeBook = new Dziennik($('body'), 'Dzienniczek ucznia', 'Klasa 6b', <Array<Uczen>>dane);

    firstGradeBook.Render();

};