import {
    Component,
    ViewChild,
    TemplateRef,
    OnInit,
    AfterViewInit,
    ComponentFactoryResolver,
    ViewContainerRef,
    ComponentFactory,
    AfterContentInit
} from '@angular/core';
import { FarrisSidebarComponent } from '../../../../../projects/sidebar/src/public-api';
import { FarrisSidebarService } from '../../../../../projects/sidebar/src/public-api';
import { Observable, of } from 'rxjs';
import { Propertiy } from 'src/app/interface/propertiy-interface';

@Component({
    selector: 'app-root',
    templateUrl: './sidebar.component.html',
    styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit, AfterViewInit, AfterContentInit {
    ts = '';
    // 侧边栏的位置
    positionData='right';
    html = `
    <div style="position: relative; height: 500px; overflow: hidden;">
        <div>内容区域</div>
        <div>内容区域</div>
        <div>内容区域</div>
        <div>内容区域</div>
        <div>内容区域</div>
        <div #sidebardiv></div>
        <div style="margin-left:20px;">
            <button (click)="onClick(true)">打开侧边栏</button>
            <button (click)="openSidebar()">打开侧边栏2</button>
        </div>
        <!-- farris-sidebar要放在主体的下面 -->
        <farris-sidebar [showPos]="'right'" [title]="'ssss'" #farrissidebar [resizeable]="true"
            [mainCls]="'main-tsCls'" [showHeader]="true" [showFooter]="true" [maskable]="true"
            [maskClosable]="true" [width]="'40%'" [showEntry]="true" [beforeClose]="beforeClose"
            [parentCls]="'sss'">
            <!-- <ng-template farrisSidebarHeader [headerCls]="'f-sidebar-header-test'">
    自定义整个header部分
    </ng-template> -->
            <ng-template farrisSidebarTitle [titleCls]="'f-sidebar-title-test'">
                自定义侧边栏的标题
            </ng-template>
            <!-- <ng-template farrisSidebarHcontent [hcontentCls]="'f-sidebar-hcontent-test'">
    预留区域
    </ng-template> -->
            <ng-template farrisSidebarToolbar [toolbarCls]="'f-sidebar-toolbar-test'">
                <span (click)="farrissidebar.toggle()">关闭</span>
            </ng-template>
            <!-- <ng-template farrisSidebarIcon [iconCls]="'f-sidebar-icon-test'">
    静态入入口123456
    </ng-template> -->
            <ng-template farrisSidebarContent [contentCls]="'f-sidebar-content-test'">
                侧边栏包含的内容区域
                <app-form></app-form>
            </ng-template>
            <ng-template farrisSidebarFooter [footerCls]="'f-sidebar-footer-test'">
                <button type="button" class="btn f-btn-mr btn-primary">保存</button>
                <button type="button" class="btn f-btn-mr btn-secondary">取消</button>
            </ng-template>
        </farris-sidebar>
    </div>
    `;
    properties: Array<Propertiy> = [
        {
            name: 'width',
            value: '可不设 || 400 || 400px || 40rem || ...',
            type: '@Input()',
            description: '侧边栏宽度，默认350px'
        },
        {
            name: 'showHeader',
            value: 'true || false',
            type: '@Input()',
            description: '是否显示头部区域，默认是true'
        },
        {
            name: 'showEntry',
            value: 'true || false',
            type: '@Input()',
            description: '是否显示入口图标，默认是true'
        },
        {
            name: 'title',
            value: '字符串',
            type: '@Input()',
            description: '侧边栏标题，默认名称是侧边栏'
        },
        {
            name: 'showFooter',
            value: 'true || false',
            type: '@Input()',
            description: '是否显示底部区域，默认是false'
        },
        {
            name: 'mainCls',
            value: '字符串',
            type: '@Input()',
            description: '组件扩展样式'
        },
        {
            name: 'isOpen',
            value: 'true || false',
            type: '@Input()',
            description: '侧边栏是否展开效果，默认是false'
        },
        {
            name: 'showPos',
            value: 'left || right',
            type: '@Input()',
            description: '侧边栏位置，默认是在右侧，暂不支持上下'
        },
        {
            name: 'maskable',
            value: 'true || false',
            type: '@Input()',
            description: '是否显示遮罩层，默认是true'
        },
        {
            name: 'maskClosable',
            value: 'true || false',
            type: '@Input()',
            description: '点击遮罩层，关闭侧边栏，默认是true'
        },
        {
            name: 'beforeClose',
            value: 'beforeClose: () => Observable<boolean>',
            type: '@Input()',
            description: '关闭前事件，接受一个函数'
        },
        {
            name: 'FarrisSidebarIconDirective',
            value: '<ng-template farrisSidebarIcon [iconCls]="f-sidebar-icon-test">test</ng-template>',
            type: '@ContentChild()',
            description: '侧边栏入口区域'
        },
        {
            name: 'FarrisSidebarHeaderDirective',
            value: '<ng-template farrisSidebarHeader [headerCls]="f-sidebar-icon-test">test</ng-template>',
            type: '@ContentChild()',
            description: '侧边栏header区域'
        },
        {
            name: 'FarrisSidebarTitleDirective',
            value: '<ng-template farrisSidebarTitle [titleCls]="f-sidebar-icon-test">test</ng-template>',
            type: '@ContentChild()',
            description: '侧边栏header的标题区域'
        },
        {
            name: 'FarrisSidebarHcontentDirective',
            value: '<ng-template farrisSidebarHcontent [hcontentCls]="f-sidebar-icon-test">test</ng-template>',
            type: '@ContentChild()',
            description: '侧边栏header中间区域'
        },
        {
            name: 'FarrisSidebarToolbarDirective',
            value: '<ng-template farrisSidebarToolbar [toolbarCls]="f-sidebar-icon-test">test</ng-template>',
            type: '@ContentChild()',
            description: '侧边栏header工具栏区域'
        },
        {
            name: 'FarrisSidebarContentDirective',
            value: '<ng-template farrisSidebarContent [contentCls]="f-sidebar-icon-test">test</ng-template>',
            type: '@ContentChild()',
            description: '侧边栏内容区域'
        },
        {
            name: 'FarrisSidebarFooterDirective',
            value: '<ng-template farrisSidebarFooter [footerCls]="f-sidebar-icon-test">test</ng-template>',
            type: '@ContentChild()',
            description: '侧边栏底部区域'
        },
        {
            name: 'changeState',
            value: 'EventEmitter<any>',
            type: '@Output()',
            description: '侧边栏触发是否关闭状态'
        }
    ];


    title = 'farris-sidebar';

    @ViewChild('buttonRef') buttonRef: TemplateRef<any>;

    @ViewChild('farrissidebar') farrissidebar: FarrisSidebarComponent;

    @ViewChild('sidebardiv', { read: ViewContainerRef }) sssvvv: any;
    
    toolbarData = [
        {
          id: 'toolbar-001',
          text: '新增',
          class: 'btn-primary',
          disabled: true
        },
        {
          id: 'toolbar-002',
          text: '编辑',
          disabled: false
        },
        {
          id: 'toolbar-003',
          text: '查看',
          disabled: false
        },
        {
          id: 'toolbar-004',
          text: '删除',
          disabled: true
        },
        {
          id: 'toolbar-005',
          text: '关闭',
          disabled: false
        }
      ];

    beforeClose = () => {
        const random = Math.random();
        console.log(random);
        if (random > 0.5) {
            return of(true);
        } else {
            return of(false);
        }
    }

    openSidebar() {
        this.farrissidebar.isOpen = true;
    }

    constructor(
        private sidebarService: FarrisSidebarService,
        private resolver: ComponentFactoryResolver
    ) { }

    ngOnInit() { }

    onClick(event) {
        this.sidebarService.sendIsOpen(event)
    }

    ngAfterViewInit() {

    }

    ngAfterContentInit() {
        // const factory: ComponentFactory<SidebarTestComponent> = this.resolver.resolveComponentFactory(SidebarTestComponent);
        // this.sssvvv.createComponent(factory);
    }

}