import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
import { DataApiService } from './DataApiService';
import * as types from './types';

import { UploadFile } from '../code/UploadFile';

@Component({
    selector: 'app-data-examsoft',
    templateUrl: './ImportExamSoftComponent.html',
    styles: [
        '.dmContent { display: flex; flex-direction: column; }',
        '.dmContent>div { flex: 0 0 auto; width: 96%; margin: auto; }',
        '.dmContent>div:first-child { border: none; border-bottom: 1px solid #99A5AD; font-size: 29px; line-height: 67px; }',
        '.dmContent>div:last-child { flex: 1 1 auto; overflow: hidden; overflow-y: auto; font-size: 14px; padding: 0px 13px; }',
        '.importWizardSection {margin: 17px; }',
        '.wizardSectionHeader { font-weight: bold; font-size: 1.25em}',
        '.wizardSectionHeader span { font-weight: bold; font-size: 1em}',
        '.wizardSectionInstructions  { padding: 7px 3px; color: #999; }',
        '.wizardSectionDetails { }',
        '.wizardSectionDetails > div { padding: 3px 0px; }',
        '.wizardSectionDetails input, select { padding: 3px 7px; border-radius: 5px;}',
        '.wizardSectionDetails input { border-width: 1px; width: 550px; }',
        '.wizardSectionDetails button { width: 550px !important; }',
        '.importError { width: 550px;  }'
    ]
})
export class ImportExamSoftComponent implements OnInit {
    isInitializing = false;
    fileName: string;
    examName: string;
    school: number;
    academicPeriod: number;
    analyticFeed = 1;
    isImporting = false;
    importMessage: string = null;

    schools: types.School[] = new Array<types.School>(0);
    academicPeriods: types.AcademicYear[] = new Array<types.AcademicYear>(0);

    @ViewChild('fileInput') inputEl: ElementRef;

    constructor(private service: DataApiService) { }

    private clear() {
        this.fileName = null;
        this.examName = null;
    }
    get selectedSchool(): string {
        if (this.school == null || this.school <= 0) { return ''; }
        // tslint:disable-next-line:triple-equals
        const _school = this.schools.find(item => item.id == this.school);
        if (_school == null) { return ''; }
        return _school.name;
    }

    get selectedAcademicPeriod(): string {
        if (this.academicPeriod == null || this.academicPeriod <= 0) { return ''; }
        // tslint:disable-next-line:triple-equals
        const _period = this.academicPeriods.find(item => item.id == this.academicPeriod);
        if (_period == null) { return ''; }
        return _period.academicYear;
    }
    onFileSelected() {
        const input = this.inputEl.nativeElement;

        if (input.files.length === 1) {
            this.fileName = input.files[0].name;
            this.examName = this.fileName.substr(0, this.fileName.indexOf('.'));
        } else {
            alert('none or more than 1 selected');
        }
    }
    initializeSchools(): Promise<boolean> {
        return new Promise<boolean>(
            (response, reject) => {
                this.service.getSchools()
                    .then(data => {
                        this.schools = data;
                        if (this.schools != null) {
                            if (this.schools.length === 1) {
                                this.school = this.schools[0].id;
                            } else {
                                this.schools.unshift({ id: 0, name: 'Select' });
                                this.school = 0;
                            }
                        }
                        response(true);
                    })
                    .catch(error => { reject(error); });
            });
    }
    initializeAcademicPeriods(): Promise<boolean> {
        return new Promise<boolean>(
            (response, reject) => {
                this.service.getAcademicPeriods()
                    .then(data => {
                        this.academicPeriods = data;
                        if (this.academicPeriods != null) {
                            if (this.academicPeriods.length === 1) {
                                this.academicPeriod = this.academicPeriods[0].id;
                            } else {
                                this.academicPeriods.unshift({ id: 0, academicYear: 'Select' });
                                this.academicPeriod = 0;
                            }
                        }
                        response(true);
                    })
                    .catch(error => { reject(error); });
            });
    }
    canImport(): boolean {
        return this.fileName != null && this.fileName !== '' &&
            this.examName != null && this.examName !== '' &&
            this.school != null && this.school > 0 &&
            this.academicPeriod != null && this.academicPeriod > 0 &&
            this.analyticFeed != null && this.analyticFeed > 0;
    }
    clearImport() {
        this.isImporting = false;
        this.importMessage = null;
        this.inputEl.nativeElement.value = null;
        this.fileName = null;
        this.examName = null;
        this.academicPeriod = this.academicPeriods.length === 1 ? this.academicPeriods[0].id : 0;
        this.school = this.schools.length === 1 ? this.schools[0].id : 0;
    }
    doImport() {
        const input = this.inputEl.nativeElement;
        this.isImporting = true;
        this.importMessage = null;
        const upload = new UploadFile<types.ApiResults<boolean>>(
            input.files[0],
            {
                examFileName: this.fileName,
                examName: this.examName,
                academicPeriod: this.academicPeriod,
                school: this.school
            },
            '/api/exam',
            (data) => {
                if (data.success) {
                    this.isImporting = false;
                    this.clearImport();
                } else {
                    this.isImporting = false;
                    this.importMessage = data.message;
                }
            },
            (evt) => { },
            (error) => {
                this.importMessage = error;
                this.isImporting = false;
            }).startUpload();
    }
    ngOnInit() {
        this.isInitializing = true;
        Promise.all(
            [
                this.initializeSchools(),
                this.initializeAcademicPeriods()
            ])
            .then(data => {
                this.isInitializing = false;
            })
            .catch(error => {
                this.isInitializing = false;
                alert(`Error Loading School information: ${error}`);
            });
    }
}