import { HttpClient } from '@angular/common/http';
import { LoadingService } from '@farris/ui-loading';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import { Component, Renderer2, TemplateRef, ViewChild, ComponentFactoryResolver, Injector, ComponentRef, ElementRef } from '@angular/core';
import { BsModalService, BsModalRef } from '@farris/ui-modal';
import { MessagerService } from '@farris/ui-messager';
import { DialogContentComponent } from './dialog-content.component';
import { of } from 'rxjs/observable/of';

@Component({
    selector: 'app-dialog-demo',
    templateUrl: `./dialog-demo.component.html`
})
export class DialogDemoComponent {

    @ViewChild('buttonRef2') btnRef: TemplateRef<any>;
    items = [
        { id: false, label: '中国', src: 'assets/images/avatar-1.png' },
        { id: 2, label: '俄罗斯', src: 'assets/images/avatar-2.png' },
        { id: 3, label: '菲律宾', src: 'assets/images/avatar-3.png' },
        { id: 4, label: '越南', src: 'assets/images/avatar-4.png' },
        { id: 5, label: '老挝', src: 'assets/images/avatar-5.png' },
    ];
    dlg: BsModalRef;
    enableResponse=true;
    enableAuto=true;
    dialogWidth=500;
    dialogEnabelResponse=true;
    constructor(
        private modalService: BsModalService,
        private injector: Injector,
        private cfr: ComponentFactoryResolver,
        private msgService: MessagerService,
        private loadingSer: LoadingService,
        private http: HttpClient
    ) {

    }

    showDialog() {
        this.dlg = this.modalService.show(DialogContentComponent, {
            title: 'AAAAAA',
            width: this.dialogWidth, height: 600,
            // buttons: this.btnRef,
            showButtons: false,
            areaResponse:this.dialogEnabelResponse,
            beforeClose: (ref) => {
                console.log(ref);
                // const canClose = new Subject<boolean>();
                // this.msgService.question('确认要关闭此窗口吗？ 亲.', () => {
                //     canClose.next(true);
                // }, () => {
                //     canClose.next(false);
                // });

                // return canClose.asObservable();
                return this.msgService.confirm('确认要关闭此窗口吗？');
            }
        });

        this.dlg.dialog.instance.opened.subscribe(() => {
            console.log('窗口已打开');
        });

        this.dlg.dialog.instance.closed.subscribe(() => {
            console.log('窗口已关闭');
        });

        this.dlg.dialog.instance.resized.subscribe((e) => {
            console.log('resized:', e);
        });
        // const instance = this.dlg.content as DialogContentComponent;

        // console.log(instance.content, this.dlg);
    }

    farrisDialogbeforeClose = () => {
        alert(11111);
        return of(true);
    }

    showDialog2() {
        const cmpF = this.cfr.resolveComponentFactory(DialogContentComponent);
        const cmpR = cmpF.create(this.injector);

        this.dlg = this.modalService.show(cmpR, {
            title: 'BBBBB',
            width:  this.dialogWidth, height: 600,
            buttons: this.btnRef,
            showButtons: false,
            areaResponse:this.dialogEnabelResponse,
            initialState: {
                content: '我传来了。。。'
            }
        });
    }

    showDialog4() {
        const cmpF = this.cfr.resolveComponentFactory(DialogContentComponent);
        const cmpR = cmpF.create(this.injector);
        this.dlg = this.modalService.show(cmpR, {
            title: 'BBBBB',
            width:  this.dialogWidth, height: 600,
            buttons: this.btnRef,
            areaResponse:this.dialogEnabelResponse,
            showButtons: true
        });
    }

    showDialog3() {
        let btnOk = null;
        let bnt2 = null;
        this.dlg = this.modalService.show(DialogContentComponent, {
            title: 'AAAAAA',
            width:  this.dialogWidth, height: 600,
            areaResponse:this.dialogEnabelResponse,
            initialState: {
                content: 'Test Test Input'
            },
            buttons: [
                {
                    text: 'info',
                    cls: 'btn btn-info',
                    handle: () => {
                        console.log(this.dlg.buttons);
                    }
                },
                { text: 'primary', cls: 'btn btn-primary' },
                { text: 'secondary', cls: 'btn btn-secondary' },
                { text: 'success', cls: 'btn btn-success' },
                { text: 'danger', cls: 'btn btn-danger' },
                {
                    text: 'warning', cls: 'btn btn-warning', handle: (e) => {
                        e.target.disabled = true;
                        bnt2 = e.target;
                        this.http.get('http://www.baidu.com').subscribe((v) => {
                            console.log('baidu');
                            this.dlg.close();
                        });
                    }
                },
                {
                    text: 'CLOSE', cls: 'btn btn-outline-secondary', handle: (e) => {
                        e.target.disabled = true;
                        btnOk = e.target;
                        this.dlg.close();
                    }
                }
            ],
            showButtons: true,
            beforeClose: () => {
                const canClose = new Subject<boolean>();
                this.msgService.question('确认要关闭此窗口吗？ 亲.', () => {
                    canClose.next(true);
                }, () => {
                    if (btnOk) {
                        btnOk.disabled = false;
                    }
                    if (bnt2) {
                        bnt2.disabled = false;
                    }
                    canClose.next(false);
                });

                return canClose.asObservable();
            },
            opened: () => {
                console.log('窗口已打开。');
            },
            closed: () => {
                this.msgService.info('窗口已关闭。');
                console.log('窗口已关闭。');
            }
        });

    }

    showCustomMsg() {
        this.msgService.show('warning', `<b>登录失败</b><br/>，<font color='red'>请检查用户名或密码是否正确！</font>
            <br/>登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，\r\n
            请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！
            登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，
            请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，
            请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！
            登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，
            登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，
            请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！
            登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！
            请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，
            请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！
            登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！`
            , {
                width: 600, height: 400,
                title: '标题还是要有的，万一被登TD就不好了，您说是吧', safeHtml: false
            });
    }

    showInfoMsg() {
        this.msgService.info(`登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，
                            请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！
                            登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！`, () => {
            this.showDialog4();
        });
    }
    showErrorMsg() {
        this.msgService.error('登录失败，请检查用户名或密码是否正确！', '这是提示信息说明部分');
    }
    showWarningMsg() {
        this.msgService.warning('登录失败，请检查用户名或密码是否正确！');
    }
    showQuestiongMsg() {
        this.msgService.question('登录失败，请检查用户名或密码是否正确！', () => {
            this.showInfoMsg();
        });
    }

    showQuestion2() {
        const msgbox = this.msgService.question2('登录失败，请检查用户名或密码是否正确', [
            {
                text: 'OK', cls: 'btn btn-primary', defaultFocus: true, handle: () => {
                    msgbox.close();
                }
            },
            {
                text: '取消', cls: 'btn btn-default', defaultFocus: false, handle: () => {
                    msgbox.close();
                }
            }
        ]);
    }

    showQuestion22() {
        const msgbox = this.msgService.question2('登录失败，请检查用户名或密码是否正确', [
            {
                text: 'OK', cls: 'btn btn-primary', defaultFocus: false, handle: () => {
                    console.log('ok');
                    msgbox.close();
                }
            },
            {
                text: '取消', cls: 'btn btn-default', defaultFocus: true, handle: () => {
                    console.log('cancel');
                    msgbox.close();
                }
            }
        ]);
    }

    showIframe() {
        this.modalService.show('http://m.baidu.com', {
            title: 'iframe',
            width: 500, height: 600,
            // buttons: this.btnRef,
            showButtons: false,
            dialogType: 'iframe',
            beforeClose: () => {
                const canClose = new Subject<boolean>();
                this.msgService.question('确认要关闭此窗口吗？ 亲.', () => {
                    canClose.next(true);
                }, () => {
                    canClose.next(false);
                });

                return canClose.asObservable();
            }
        });

    }

    showLoading(delay: string, type = 0) {
        delay = delay || '1000';
        this.loadingSer.show({ delay: parseInt(delay, 10), message: '即将打开百度。。。。', type: type });
        setTimeout(() => {
            this.loadingSer.close();
        }, 3800);
    }

    showLoading2() {
        this.loadingSer.show({ delay: 1000 });
        setTimeout(() => {
            this.loadingSer.close();
        }, 3800);
    }
}