import {IModal} from '../interfaces/components/IModal';
import {TAbstractObject} from '../types/TAbstractObject';
import {EInputTypes} from '../types/EInputTypes';
import {IAbstractObject} from '../interfaces/components/IAbstractObject';

export class Modal implements IModal {

    protected html:string = `
        <div class="modal fade">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close js-close-btn" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body js-body">
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary js-cancel-btn" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary js-save-button">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    `;

    protected _template:HTMLElement;

    protected body:HTMLElement;

    protected saveButton:HTMLElement;

    protected cancelBtn:HTMLElement;

    protected closeBtn:HTMLElement;

    protected data:TAbstractObject;

    protected resolve:any;

    protected reject:any;

    protected objCreator:(type:EInputTypes)=>IAbstractObject;

    public constructor()
    {
        let div = document.createElement('div');
        div.innerHTML = this.html.trim();
        this._template = <HTMLElement>div.firstChild;
        this.body = this._template.querySelector('.js-body');
        this.saveButton = this._template.querySelector('.js-save-button');
        this.cancelBtn = this._template.querySelector('.js-cancel-btn');
        this.closeBtn = this._template.querySelector('.js-close-btn');
    }

    public get template():HTMLElement
    {
        return this._template;
    }

    public setObjCreator(callback:(type:EInputTypes)=>IAbstractObject)
    {
        this.objCreator = callback;
    }

    public show(obj:TAbstractObject):Promise<TAbstractObject>
    {
        return new Promise<TAbstractObject>((resolve:any, reject:any)=>{
            this.data = obj;
            this.resolve = resolve;
            this.reject = reject;
            let inputObj = this.objCreator(obj.type);
            inputObj.loadData(obj);
            this.body.innerHTML = '';
            this.body.append(inputObj.template);
            inputObj.eventsListen();
            this._template.classList.add('show');
            this._template.style.display = 'block';
        });
    }

    public hide()
    {
        this._template.classList.remove('show');
        this._template.style.display = 'none';
    }

    public eventsListen()
    {
        this.saveButton.onclick = (e:Event)=>{
            e.preventDefault();
            this.hide();
            this.resolve(this.data);
        };
        this.cancelBtn.onclick = ()=>{
            this.hide();
        }
        this.closeBtn.onclick = ()=>{
            this.hide();
        }
    }

}