import { Component, ViewChild, Injector, Output, EventEmitter} from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { finalize } from 'rxjs/operators';
import { OrderNotificationTemplatesServiceProxy, CreateOrEditOrderNotificationTemplateDto 
					} from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/common/app-component-base';
import * as moment from 'moment';
import Quill from "quill";
@Component({
    selector: 'createOrEditOrderNotificationTemplateModal',
    templateUrl: './create-or-edit-orderNotificationTemplate-modal.component.html'
})
export class CreateOrEditOrderNotificationTemplateModalComponent extends AppComponentBase {

    @ViewChild('createOrEditModal', { static: true }) modal: ModalDirective;

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

    active = false;
    saving = false;
    selectValidation = false;

    orderNotificationTemplate: CreateOrEditOrderNotificationTemplateDto = new CreateOrEditOrderNotificationTemplateDto();

    constructor(
        injector: Injector,
        private _orderNotificationTemplatesServiceProxy: OrderNotificationTemplatesServiceProxy
    ) {
        super(injector);
    }

    ngOnInit(){
        
    }

    onShown():void{
        // var that = this
        // $('.kt-select2').select2();
        // $('#viewNotifOrderStatusTypes').change(function(){
        //     that.selectValidation = true;
        // })
        // var quill = new Quill('#editor-container', {
        //     modules: {
        //         toolbar: '#toolbar-container'
        //       },
        //     placeholder: 'Compose an epic...',
        //     theme: 'snow'
        //   });
        // var DirectionAttribute = Quill.import('attributors/attribute/direction');
        // Quill.register(DirectionAttribute,true);

        // var AlignClass = Quill.import('attributors/class/align');
        // Quill.register(AlignClass,true);

        // var BackgroundClass = Quill.import('attributors/class/background');
        // Quill.register(BackgroundClass,true);

        // var ColorClass = Quill.import('attributors/class/color');
        // Quill.register(ColorClass,true);

        // var DirectionClass = Quill.import('attributors/class/direction');
        // Quill.register(DirectionClass,true);

        // var FontClass = Quill.import('attributors/class/font');
        // Quill.register(FontClass,true);

        // var SizeClass = Quill.import('attributors/class/size');
        // Quill.register(SizeClass,true);

        // var AlignStyle = Quill.import('attributors/style/align');
        // Quill.register(AlignStyle,true);

        // var BackgroundStyle = Quill.import('attributors/style/background');
        // Quill.register(BackgroundStyle,true);

        // var ColorStyle = Quill.import('attributors/style/color');
        // Quill.register(ColorStyle,true);

        // var DirectionStyle = Quill.import('attributors/style/direction');
        // Quill.register(DirectionStyle,true);

        // var FontStyle = Quill.import('attributors/style/font');
        // Quill.register(FontStyle,true);

        // var SizeStyle = Quill.import('attributors/style/size');
        // Quill.register(SizeStyle,true);
       
        // var Block = Quill.import('blots/block');
        // Block.tagName = 'HTML';
        // Quill.register(Block, true);
    }

    show(orderNotificationTemplateId?: number): void {
        var that = this

        if (!orderNotificationTemplateId) {
            this.orderNotificationTemplate = new CreateOrEditOrderNotificationTemplateDto();
            this.orderNotificationTemplate.id = orderNotificationTemplateId;
            that.selectValidation = false;
            // this.orderNotificationTemplate.orderStatusTypeId = '';
            this.active = true;
            this.modal.show();
        } else {
            this._orderNotificationTemplatesServiceProxy.getOrderNotificationTemplateForEdit(orderNotificationTemplateId).subscribe(result => {
                this.orderNotificationTemplate = result.orderNotificationTemplate;
                that.selectValidation = true;
                this.active = true;
                this.modal.show();
            });
        }
    }

    copy(orderNotificationTemplateId?: number): void {

        this._orderNotificationTemplatesServiceProxy.getOrderNotificationTemplateForEdit(orderNotificationTemplateId).subscribe(result => {
            this.orderNotificationTemplate = result.orderNotificationTemplate;
            this.orderNotificationTemplate.id = null;
            this.orderNotificationTemplate.code = result.orderNotificationTemplate.code +'-COPY';
            this.selectValidation = true;
            this.active = true;
            this.modal.show();
        });
                
        
    }

    escapeHtml(text) {
        if (!text) {
          text = '';
        }
        text += '';
        text = text
          .replace(/&amp;/g, '&')
          .replace(/&lt;/g, '<')
          .replace(/&gt;/g, '>')
          .replace(/&quot;/g, '"')
          .replace(/&#039;/g, '\'');
        return text;
      }

    save(): void {
            
            this.saving = true;
            this.orderNotificationTemplate.template = this.escapeHtml(this.orderNotificationTemplate.template.trim())
            
            this._orderNotificationTemplatesServiceProxy.createOrEdit(this.orderNotificationTemplate)
             .pipe(finalize(() => { this.saving = false;}))
             .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.close();
                this.modalSave.emit(null);
             });
    }

    close(): void {
        this.active = false;
        this.modal.hide();
    }
}