import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
import {AbstractComponent} from 'gp-admin-abstract';

@Component({
  selector: 'gp-alert',
  template: `
<gp-popup #popup>

  <div class="modal-form__content margin--bottom-2 text--align-center">
    <span class="gp-alert__text">{{title}}</span>
  </div>

  <footer class="modal-form__footer flex flex--content-center">

    <gp-button [text]="buttonActionText" (click)="action()" color="error"></gp-button>

    <div class="margin--left-1">
      <gp-button [text]="buttonCancelText" (click)="cancel()"></gp-button>
    </div>

  </footer>

</gp-popup>
`,
  styles: [
`@charset "UTF-8";
/**
 * Переменные
 */
:root {
  --color-white: white;
  --color-success: #00afec;
  --color-warning: #ffb827;
  --color-error: #f35252;
  --color-disabled: #dbdbdb;
  --color-black: black;
  --color-span: #b5b5b5;
  --color-span-second: #212121;
  --color-bg: #f8f8f8;
  --color-bg-second: #f8f8f8;
  --color-bg-success: rgba(0, 175, 236, 0.1);
  --color-bg-warning: var(--color-warning);
  --color-bg-error: var(--color-error);
  --color-placeholder: #b5b5b5;
  --color-border: #dbdbdb;
  --color-radio-border: #d3d3d3;
  --font-roboto: 'Roboto', sans-serif;
  --font-helvetica: 'Helvetica', sans-serif; }

/**
 *
 */
/**
 * Стили для компонента "gp-alert"
 */
/deep/ .gp-alert {
  background-color: rgba(33, 33, 33, 0.8);
  z-index: 100; }
  /deep/ .gp-alert__text {
    font: 1.4rem/2rem "Roboto", sans-serif;
    color: #212121;
    letter-spacing: 0.03rem; }

.modal-form {
  position: absolute;
  padding: 3rem;
  font-family: "Roboto", sans-serif;
  border: 0.1rem solid #dbdbdb;
  top: 5rem;
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }
  .modal-form__header {
    text-align: center; }
  .modal-form__title {
    font: bold 1.4rem/2rem "Roboto", sans-serif;
    letter-spacing: 0.03rem;
    text-align: center;
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
`]
})

export class AlertComponent extends AbstractComponent {

  /**
   * Текст на кнопке "Отмена"
   *
   * @type {string}
   */
  @Input() buttonCancelText: string = 'Отмена';

  /**
   * Текст на кнопке действия
   *
   * @type {string}
   */
  @Input() buttonActionText: string = 'Удалить';

  /**
   * Текст в заголовке
   */
  @Input() title: string = 'Удалить статью?';

  /**
   * Событие при клике на Действие (Удалить)
   *
   * @type {EventEmitter<boolean>}
   */
  @Output() actionClick: EventEmitter<boolean> = new EventEmitter<boolean>();

  /**
   * Событие при клике на Отменить
   *
   * @type {EventEmitter<boolean>}
   */
  @Output() cancelClick: EventEmitter<boolean> = new EventEmitter<boolean>();

  /**
   * Необходим для получение доступа к popup
   * И закрытия его
   */
  @ViewChild('popup') popup: any;

  constructor(protected el: ElementRef) {
    super(el);
  }

  action() {
    this.show();
    this.actionClick.emit(true);
  }

  cancel() {
    this.hide();
    this.cancelClick.emit(true);
  }

  /**
   * Закрытие alert
   */
  public hide() {
    this.popup.hide();
  }

  /**
   * Показать alert
   */
  public show() {
    this.popup.show();
  }

}