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

@Component({
  selector: 'gp-button',
  template: `
<button
  class="gp-button {{extraClass}}" [disabled]="disabled"
  [ngClass]="[
    state !== '' ? 'gp-button--'+state : '',
    color !== '' ? 'gp-button--'+color : '',
    size !== '' ? 'gp-button--'+size : '',
    add == true ? 'gp-button--add': ''
  ]"
>{{text}}</button>

<!-- success / error / warning / grey / white -->
`,
  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-button"
 */
.gp-button {
  font: bold 1.4rem/1.6rem "Roboto", sans-serif;
  padding: 1rem 3rem .9rem;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  border: 0.1rem solid rgba(0, 0, 0, 0.05);
  border-radius: .2rem;
  background-color: #f8f8f8; }
  .gp-button:active, .gp-button--active {
    opacity: .8; }
  .gp-button--small {
    padding: 0.7rem 2rem; }
  .gp-button--success {
    color: var(--color-white);
    border-color: rgba(0, 0, 0, 0.15);
    outline-color: #00afec;
    background-color: #00afec; }
    .gp-button--success:hover {
      background-color: rgba(0, 175, 236, 0.2); }
  .gp-button--error {
    color: var(--color-white);
    border-color: rgba(0, 0, 0, 0.15);
    outline-color: #f35252;
    background-color: #f35252; }
    .gp-button--error:hover {
      background-color: rgba(243, 82, 82, 0.2); }
  .gp-button--warning {
    color: var(--color-white);
    border-color: rgba(0, 0, 0, 0.15);
    outline-color: #ffb827;
    background-color: #ffb827; }
    .gp-button--warning:hover {
      background-color: rgba(255, 184, 39, 0.2); }
  .gp-button--grey {
    border-color: rgba(0, 0, 0, 0.05);
    outline-color: #ccc; }
    .gp-button--grey:hover {
      color: #00afec; }
    .gp-button--grey:active, .gp-button--grey.gp-button--active {
      color: #00afec;
      border-color: rgba(0, 0, 0, 0.05);
      background-color: var(--color-white); }
  .gp-button--white {
    color: #00afec;
    border-color: transparent;
    outline-color: rgba(0, 175, 236, 0.3);
    background-color: var(--color-white);
    padding: 0; }
    .gp-button--white:hover {
      opacity: 0.7; }
    .gp-button--white:active, .gp-button--white.gp-button--active {
      color: #00afec;
      border-color: rgba(0, 175, 236, 0.3);
      background-color: var(--color-white); }
    .gp-button--white:disabled {
      color: #b5b5b5;
      border-color: transparent;
      background-color: transparent !important; }
  .gp-button--add {
    position: relative;
    padding-left: 3.2rem; }
    .gp-button--add:before {
      content: '';
      display: block;
      width: 1.2rem;
      height: 1.2rem;
      position: absolute;
      left: 1rem;
      top: 50%;
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      background: url("/assets/img/button-add.svg") no-repeat center;
      opacity: 0.4; }
    .gp-button--add:hover:before, .gp-button--add:active:before {
      opacity: 1; }
  .gp-button:disabled, .gp-button--disabled {
    cursor: not-allowed;
    color: #b5b5b5;
    outline-color: #ccc;
    background-color: #f8f8f8; }
`]
})

export class ButtonComponent extends AbstractComponent {
  @Input() text: string = '';
  @Input() state: string = '';
  @Input() color: string = '';
  @Input() size: string = '';
  @Input() add = false;
  @Input() disabled: boolean = false;

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

}