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

@Component({
    selector: 'gp-popup',
    template: `
<div class="gp-popup pa top right bottom left" [hidden]="!isShow">
    <form class="modal-form bg border--radius-all">
        <ng-content></ng-content>
    </form>
</div>
`,
    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-popup"
 */
.gp-popup {
  z-index: 100;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
  min-height: 100vh;
  padding-bottom: 2.5rem;
  background-color: rgba(33, 33, 33, 0.8); }
  .gp-popup__text {
    color: #212121;
    font-weight: 400 1.4rem/2rem "Roboto", sans-serif;
    letter-spacing: 0.03rem; }

.modal-form {
  font-family: "Roboto", sans-serif;
  position: absolute;
  top: 5rem;
  left: 50%;
  width: 50rem;
  margin-bottom: 5rem;
  padding: 2rem;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 0.1rem solid #dbdbdb; }
`]
})

export class PopupComponent extends AbstractComponent {

    @Output() onShow: EventEmitter<any> = new EventEmitter();
    @Output() onHide: EventEmitter<any> = new EventEmitter();

    /**
     * Индикатор показа всплывающего окна
     *
     * @type {boolean}
     */
    isShow: boolean = false;

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

    /**
     * Для закрытия
     */
    hide() {
        this.isShow = false;
        this.onHide.emit();
    }

    /**
     * Для показа
     */
    show() {
        this.isShow = true;
        this.onShow.emit();
    }

    /**
     * Переключатель
     */
    toogle() {
        this.isShow ? this.hide() : this.show();
    }

}