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

@Component({
  selector: 'gp-switch-button',
  template: `
<button
  ngDefaultControl
  class="gp-switch-button {{extraClass}}"
  [ngClass]="[
    !!state ? 'gp-switch-button--'+state : '',
    !!size ? 'gp-switch-button--'+size : '',
    disabled ? 'gp-switch-button--disabled' : '',
    checked ? 'gp-switch-button--active' : ''
  ]"
  (click)="toggleClass()"
  [disabled]="disabled"
>{{text}}</button>

<!-- success / error / warning / grey / white / small -->
`,
  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-switch-button"
 */
.gp-switch-button {
  font: bold 1.4rem/1.6rem "Roboto", sans-serif;
  position: relative;
  padding: 1rem 3rem 0.9rem;
  cursor: pointer;
  -moz-transition: all 100ms ease;
  -o-transition: all 100ms ease;
  -webkit-transition: all 100ms ease;
  transition: all 100ms ease;
  text-align: center;
  border: 0.1rem solid rgba(0, 0, 0, 0.01);
  border-radius: 0.2rem; }
  .gp-switch-button:after {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    bottom: 0.2rem;
    left: 0.2rem;
    display: block;
    width: 1.3rem;
    margin-right: calc(100% - 1.7rem);
    content: '';
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    border-radius: 0.1rem;
    background-color: var(--color-white);
    box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.15); }
  .gp-switch-button:active:after, .gp-switch-button--active:after {
    margin-left: calc(100% - 1.7rem);
    border-color: rgba(0, 0, 0, 0.1); }
  .gp-switch-button:disabled, .gp-switch-button--disabled {
    cursor: not-allowed;
    background-color: #f8f8f8; }
  .gp-switch-button--small {
    padding: 0.7rem 2.5rem; }
  .gp-switch-button--success {
    background-color: var(--color-bg-success);
    color: #00afec; }
    .gp-switch-button--success:active, .gp-switch-button--success.gp-switch-button--active {
      background-color: #00afec;
      color: var(--color-white); }
  .gp-switch-button--error {
    background-color: rgba(243, 82, 82, 0.1);
    color: #f35252; }
    .gp-switch-button--error:active, .gp-switch-button--error.gp-switch-button--active {
      background-color: #f35252;
      color: var(--color-white); }
  .gp-switch-button--warning {
    background-color: rgba(255, 184, 39, 0.1);
    color: #ffb827; }
    .gp-switch-button--warning:active, .gp-switch-button--warning.gp-switch-button--active {
      background-color: #ffb827;
      color: var(--color-white); }
  .gp-switch-button--grey {
    background-color: #f8f8f8; }
    .gp-switch-button--grey:active, .gp-switch-button--grey.gp-switch-button--active {
      background-color: #f0f0f0; }
  .gp-switch-button--white {
    border-color: #f0f0f0;
    background-color: var(--color-white); }
    .gp-switch-button--white:disabled {
      color: #b5b5b5; }
`],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: SwitchButtonComponent,
      multi: true
    }
  ]
})

export class SwitchButtonComponent extends AbstractComponent implements ControlValueAccessor {

  /**
   * Текст внутри кнопки
   *
   * @type {string}
   */
  @Input() text: string = '';

  /**
   * Состояние (стили)
   *
   * @type {string}
   */
  @Input() state: string;

  /**
   * Стиль для размера
   *
   * @type {string}
   */
  @Input() size: string;

  /**
   * Чекед или нет
   *
   * @type {boolean}
   */
  @Input() checked: boolean = false;

  /**
   * Состояние доступности компонента
   *
   * @type {boolean}
   */
  @Input() disabled: boolean = false;

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

  toggleClass() {
    this.checked = !this.checked;
    this.propagateChange(this.checked);
  }

  writeValue(value: boolean): void {
    this.checked = value;
  }

  registerOnChange(fn: any): void {
    this.propagateChange = fn;
  }

  registerOnTouched(fn: any): void {
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  propagateChange = (_: any) => {
  }

}