import {
    Directive, ElementRef, Renderer2, Input, OnInit, OnDestroy,
    AfterViewInit, ViewContainerRef, ViewChild, OnChanges, SimpleChange, SimpleChanges
} from '@angular/core';
import { LocaleService } from '@farris/ui-locale';
@Directive({
    selector: '[farrisCollapse]'
})
export class CollapseDirective implements OnInit, AfterViewInit, OnChanges, OnDestroy {

    // @C
    @Input() title: string;
    /* 初始化状态  false是不收折  true是收折*/
    @Input() collapse: boolean;

    /* 收折文本 */
    @Input() collapseText = '';

    /* 展开文本 */
    @Input() expandText = '';


    // collapseTemplate: TemplateRef<any>;
    /* button */
    button: HTMLButtonElement;
    /* span */
    span: HTMLSpanElement;

    /* 找到collapse父元素 */
    parent: HTMLElement;


    titleDiv: any;

    clickEvent: any;
    titleText: any;
    // fold
    /*  */
    constructor(
        private el: ElementRef,
        private render: Renderer2,
        private localeService: LocaleService) {
        // this.collapseTemplate = collapseTemplate.templa;
    }

    ngOnInit() {

        // if (!this.el.nativeElement.classList.contains('f-state-visible')) {
        //     this.render.addClass(this.el.nativeElement, 'f-state-visible');

        // }

    }

    /**
     * 当标题  收折文本变化时，视图随之变化
     * @param changeOption 变更变量集合
     */
    ngOnChanges(changeOption: SimpleChanges) {
        if (changeOption['title'] && this.titleDiv && this.titleText) {
            // 移除当前结构  重现渲染
            this.render.removeChild(this.titleDiv, this.titleText);
            this.titleText = this.render.createText(this.title);
            this.render.appendChild(this.titleDiv, this.titleText);
        }

        if ((changeOption['collapseText'] || changeOption['expandText']) && this.span) {
            if (this.collapse) {
                    this.span.innerHTML = this.expandText;    
            } else {
                    this.span.innerHTML = this.collapseText;   
            }
        }
    }

    ngAfterViewInit() {
        this.parent = this.render.parentNode(this.el.nativeElement);

        // if (this.localeService) {
        //     this.collapseText = this.localeService.getValue('collapseDirective.fold');
        //     this.expandText = this.localeService.getValue('collapseDirective.expand');
        // }

        if (!this.parent.classList.contains('f-section-formgroup')) {
            this.render.addClass(parent, 'f-section-formgroup');

        }

        this.generateLegendChildren();
        this.changeState();
        // 绑定收折事件
        this.clickEvent = this.click.bind(this);
        this.titleDiv.addEventListener('click', this.clickEvent);
        this.button.addEventListener('click', this.clickEvent);
    }

    click(e: any) {
        this.collapse = !this.collapse;
        this.changeState();
    }


    changeState() {
        if (this.collapse) {
            this.render.addClass(this.parent, 'f-state-collapse');
            // 按钮添加类
            this.render.removeClass(this.button, 'f-state-expand');
            if(this.expandText){
                this.span.innerHTML = this.expandText;
            }            
        } else {
            this.render.removeClass(this.parent, 'f-state-collapse');
            this.render.addClass(this.button, 'f-state-expand');
            if(this.collapseText){
                this.span.innerHTML = this.collapseText;
            }           
        }
    }


    // 生成fieldset内部元素
    generateLegendChildren() {
        // 生成标题div
        this.titleDiv = this.render.createElement('div');
        this.titleText = this.render.createText(this.title);
        this.render.addClass(this.titleDiv, 'f-title');
        this.render.appendChild(this.titleDiv, this.titleText);

        // 生成header
        const header = this.render.createElement('div');
        this.render.addClass(header, 'f-header');

        // 生成toolbar div
        const toolbarDiv = this.render.createElement('div');
        this.render.addClass(toolbarDiv, 'f-toolbar');

        // 生成收折button
        this.button = this.render.createElement('button');
        this.render.addClass(this.button, 'btn');
        this.render.addClass(this.button, 'f-btn-collapse-expand');
        this.render.addClass(this.button, 'f-btn-mx');
        // 生成收折文本
        this.span = this.render.createElement('span');
        // 组合结构
        this.render.appendChild(this.button, this.span);
        this.render.appendChild(toolbarDiv, this.button);

        this.render.appendChild(header, this.titleDiv);
        this.render.appendChild(header, toolbarDiv);

        this.render.appendChild(this.el.nativeElement, header);

    }


    ngOnDestroy() {
        if (this.clickEvent) {
            this.titleDiv.removeEventListener('click', this.clickEvent);
            this.button.removeEventListener('click', this.clickEvent);
        }
    }
}