import {IConfirmModal} from '../interfaces/components/IConfirmModal';

export class ConfirmModal implements IConfirmModal {

    private html:string = `
        <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title js-title" id="exampleModalLabel">New message</h5>
                        <button type="button" class="close" 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-primary js-yes-button">Да</button>
                        <button type="button" class="btn btn-primary js-no-button">Нет</button>
                    </div>
                </div>
            </div>
        </div>
    `;

    private _template:HTMLElement;

    private title:HTMLElement;

    private body:HTMLElement;

    private yesButton:HTMLElement;

    private noButton:HTMLElement;

    private resolve:any;

    private reject:any;

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

    public constructor()
    {
        let div = document.createElement('div');
        div.innerHTML = this.html.trim();
        this._template = <HTMLElement>div.firstChild;
        this.title = this._template.querySelector('.js-title');
        this.body = this._template.querySelector('.js-body');
        this.yesButton = this._template.querySelector('.js-yes-button');
        this.noButton = this._template.querySelector('.js-no-button');
    }

    public eventListen()
    {
        this.yesButton.onclick = ()=>{
            this._template.classList.remove('show');
            this._template.style.display = 'none';
            this.resolve();
        };
        this.noButton.onclick = ()=>{
            this._template.classList.remove('show');
            this._template.style.display = 'none';
            this.reject();
        };
    }

    public show(header:string, message:string):Promise<any>
    {
        this._template.classList.add('show');
        this._template.style.display = 'block';
        this.title.innerText = header;
        this.body.innerText = message;
        return new Promise<any>((resolve:any, reject:any)=>{
            this.reject = reject;
            this.resolve = resolve;
        });
    }
}