import {
  ChangeDetectionStrategy,
  Component,
  OnDestroy,
  TemplateRef,
  ViewChild,
} from '@angular/core';
import { noop } from 'rxjs';

import { NotificationService } from '@alauda/ui';

@Component({
  template: `
    <span>
      <button
        aui-button="primary"
        (click)="
          notificationService.info({
            title: '标题',
            content: '这是一条提醒通知',
            duration: 0,
            id: 'test01'
          })
        "
      >
        提醒通知
      </button>
    </span>
    <span>
      <button
        aui-button="success"
        (click)="
          notificationService.success({
            title: '成功标题'
          })
        "
      >
        成功通知
      </button>
    </span>
    <span>
      <button
        aui-button="warning"
        (click)="notificationService.warning('警告内容')"
      >
        警告通知
      </button>
    </span>
    <span>
      <button
        aui-button="danger"
        (click)="
          notificationService.error({
            title: '错误标题',
            content: '错误内容'
          })
        "
      >
        错误通知
      </button>
    </span>
    <span>
      <button
        aui-button
        (click)="notify()"
      >
        使用内容模板的通知
      </button>
    </span>
    <span>
      <button
        aui-button
        (click)="notify2()"
      >
        使用页脚模板的通知
      </button>
    </span>
    <span>
      <button
        aui-button
        (click)="
          notificationService.success({
            duration: 0,
            title: '自定义 Class',
            content: '在 .aui-notification 同级添加了 class: custom-class',
            customClass: 'custom-class'
          })
        "
      >
        使用自定义 class 的通知
      </button>
    </span>
    <ng-template #template>
      <a>自定义超链接</a>
      <div>自定义文本</div>
      <button aui-button="primary">自定义按钮</button>
    </ng-template>
    <ng-template #footer>
      <div style="text-align: right">
        自定义页脚
        <button
          aui-button="primary"
          size="small"
        >
          primary
        </button>
        <button
          aui-button
          size="small"
        >
          default
        </button>
      </div>
    </ng-template>
  `,
  styles: [
    `
      span {
        display: block;
        margin-bottom: 8px;
      }
      ::ng-deep .custom-class {
        font-weight: bold;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BasicDemoComponent implements OnDestroy {
  @ViewChild('template', { static: true })
  template: TemplateRef<any>;

  @ViewChild('footer', { static: true })
  footerTpl: TemplateRef<any>;

  constructor(public notificationService: NotificationService) {}

  notify() {
    const notificationRef = this.notificationService.success({
      title: '标题',
      contentRef: this.template,
    });
    notificationRef.instance.beforeClosed.subscribe(noop);
    notificationRef.instance.afterClosed.subscribe(noop);
  }

  notify2() {
    const notificationRef = this.notificationService.success({
      title: '标题',
      footerRef: this.footerTpl,
      duration: 0,
    });
    notificationRef.instance.beforeClosed.subscribe(noop);
    notificationRef.instance.afterClosed.subscribe(noop);
  }

  ngOnDestroy() {
    this.notificationService.componentRefs.forEach(ref => {
      ref.destroy();
    });
    this.notificationService.wrapperInstance.elementRef.nativeElement.remove();
  }
}