import {
    Component, Input, ContentChild, TemplateRef, Optional, OnInit,
    ViewEncapsulation, AfterViewInit, ChangeDetectorRef, HostBinding, Renderer2, ElementRef
} from '@angular/core';
import { dropAnimation } from '../util/drop.animation';
import { FarrisPanelComponent } from '../panel/panel-item-list.component';
@Component({
    selector: 'farris-panel-item',
    templateUrl: './panel-item.component.html',
    styleUrls: ['./panel-item.component.css'],
    animations: [dropAnimation],
    encapsulation: ViewEncapsulation.None
})
export class FarrisPanelItemComponent implements OnInit, AfterViewInit {

    // 设置宽 高属性
    @Input() width: number;
    @Input() height: number;

    /* panelItem */
    @Input() value: any;

    // 默认tab 标题 或者是选中标题
    // tslint:disable-next-line:no-input-rename
    @Input('title') tabTitle: string;

    /* 禁用 */
    @Input()
    @HostBinding('class.f-state-disable')
    disable: boolean;

    /* 头部模板 */
    @ContentChild('headTempl') headRef: TemplateRef<any>;

    /* 工具按钮模板 */
    @ContentChild('toolTempl') toolTempl: TemplateRef<any>;

    /* 内容模板 */
    @ContentChild('contentTempl') contentRef: TemplateRef<any>;

    @HostBinding('class.farris-panel-item') isPanelItem = true;
    @HostBinding('class.card') isCard = true;

    // 默认非激活状态
    active = false;
    constructor(
        @Optional() public panel: FarrisPanelComponent,
        private changeRef: ChangeDetectorRef,
        private render: Renderer2,
        private el: ElementRef
    ) {
    }
    ngOnInit() {

    }
    ngAfterViewInit() {
        // 全部展开
        if (this.panel.defaultExpand) {
            if (this.value === null || this.value === undefined) {
                this.value = this.generateRandomId();
            }
            this.panel.updateModel(this.value);
        }
        // 收折变换
        const updateHandle: () => void = () => this.setActive();
        this.panel.subscriber.push(updateHandle);
    }

    /* 设置panel的激活状态 */
    setActive() {
        this.active = this.panel.model.some(val => this.value === val);
        // 添加删除类名
        this.active ? this.render.addClass(this.el.nativeElement, 'f-state-selected') : this.render.removeClass(this.el.nativeElement, 'f-state-selected');
        if (!this.changeRef['destroyed']) {
            this.changeRef.detectChanges();
            this.changeRef.markForCheck();
        }
    }

    /* 生成随机Id */
    generateRandomId() {
        return Math.random().toString(16).substring(2, 10);
    }

    /**
     * TODO 禁止事件捕获  不够完善
     * 激活 失去焦点 面板
     * @param event 事件对象
     */
    selectPanelItem(e: MouseEvent) {
        // 设置不可收折不可收折
        if(e){
            e.stopPropagation();
        }
        if (!this.panel.foldable) {
            return;
        }
        // value 若为空  初始化随机数字符串
        if (this.value === null || this.value === undefined) {
            this.value = Math.random().toString(16).substring(2, 10);
        }
        this.panel.updateModel(this.value);
    }
}