import {
  animate,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';
import { Component, ViewEncapsulation } from '@angular/core';
import { NzMessageComponent } from '../message/nz-message.component';
import { NzNotificationContainerComponent } from './nz-notification-container.component';

@Component({
  selector     : 'nz-notification',
  encapsulation: ViewEncapsulation.None,
  animations   : [
    trigger('enterLeave', [
      state('enter', style({ opacity: 1, transform: 'translateX(0)' })),
      transition('* => enter', [
        style({ opacity: 0, transform: 'translateX(5%)' }),
        animate('100ms linear')
      ]),
      state('leave', style({ opacity: 0, transform: 'translateY(-10%)' })),
      transition('* => leave', [
        style({ opacity: 1, transform: 'translateY(0)' }),
        animate('100ms linear')
      ]),
    ])
  ],
  template     : `
    <div class="ant-notification-notice ant-notification-notice-closable"
      [@enterLeave]="nzMessage.state"
      (mouseenter)="onEnter()"
      (mouseleave)="onLeave()">
      <div *ngIf="!nzMessage.html" class="ant-notification-notice-content">
        <div class="ant-notification-notice-content" [ngClass]="{ 'ant-notification-notice-with-icon': nzMessage.type !== 'blank' }">
          <ng-container [ngSwitch]="nzMessage.type">
            <i *ngSwitchCase="'success'" class="ant-notification-notice-icon ant-notification-notice-icon-success anticon anticon-check-circle-o"></i>
            <i *ngSwitchCase="'info'" class="ant-notification-notice-icon ant-notification-notice-icon-info anticon anticon-info-circle-o"></i>
            <i *ngSwitchCase="'warning'" class="ant-notification-notice-icon ant-notification-notice-icon-warning anticon anticon-exclamation-circle-o"></i>
            <i *ngSwitchCase="'error'" class="ant-notification-notice-icon ant-notification-notice-icon-error anticon anticon-cross-circle-o"></i>
          </ng-container>
          <div class="ant-notification-notice-message">{{ nzMessage.title }}</div>
          <div class="ant-notification-notice-description">{{ nzMessage.content }}</div>
        </div>
      </div>
      <div *ngIf="nzMessage.html" [innerHTML]="nzMessage.html"></div>
      <a tabindex="0" class="ant-notification-notice-close" (click)="onClickClose()">
        <span class="ant-notification-notice-close-x"></span>
      </a>
    </div>
  `,
  styleUrls    : [
    './style/index.less'
  ]
})
export class NzNotificationComponent extends NzMessageComponent {
  constructor(container: NzNotificationContainerComponent) {
    super(container);
  }

  onClickClose(): void {
    this._destroy();
  }
}