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

import { UploadFile } from '../code/UploadFile';
import { SafePromise } from '@rolesvillesoftware/tools/dist';

@Component({
    selector: 'app-data-stepone',
    templateUrl: './ImportStepOneComponent.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 ImportStepOneComponent {
    fileName: string;
    importMessage: string;
    isImporting = false;
    canSave = false;
    resultData: any = null;

    @ViewChild('fileInput') inputEl: ElementRef;

    get canImport(): boolean {
        return this.fileName != null && this.fileName !== '';
    }

    constructor(private service: DataApiService) { }

    onFileSelected() {
        const input = this.inputEl.nativeElement;

        if (input.files.length === 1) {
            this.fileName = input.files[0].name;
        } else {
            alert('none or more than 1 selected');
        }
    }
    clearImport() {
        this.canSave = false;
        this.isImporting = false;
        this.importMessage = null;
        this.inputEl.nativeElement.value = null;
        this.fileName = null;
        this.resultData = null;
    }
    async saveImport() {
      this.isImporting = true;
      this.fileName = this.resultData.name;
      const result = await SafePromise.run(() => this.service.saveStepOneReport(this.resultData));

      if (result.isError) {
        this.importMessage = result.error;
      }

      if (result.isSuccessful) {
        this.clearImport();
      }
      this.isImporting = false;
    }
    doImport() {
        const input = this.inputEl.nativeElement;
        this.isImporting = true;
        this.importMessage = null;
        this.resultData = null;
        const upload = new UploadFile<types.ApiResults<boolean>>(
            input.files[0],
            {
                examFileName: this.fileName
            },
            '/api/stepOneImport',
            (data) => {
                if (data.success) {
                    this.isImporting = false;
                    this.resultData = data.data;
                    this.canSave = true;
                } else {
                    this.isImporting = false;
                    this.importMessage = data.message;
                }
            },
            (evt) => { },
            (error) => {
                this.importMessage = error;
                this.isImporting = false;
            }).startUpload();
    }
}