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

@Component({
  selector: 'gp-textarea',
  template: `
<div [ngClass]="
                'gp-textarea ' + extraClass +
                (disabled ? ' gp-textarea--disabled ' : '') +
                (!!value ? ' gp-textarea--filled ' : '') +
                (!!error ? ' gp-textarea--error ' : '')
">

    <div class="flex flex--content-between">
        <div class="gp-textarea__title" *ngIf="!!title">{{ title }}</div>
        <div class="gp-textarea__error" *ngIf="showErrorText()">{{ error }}</div>
    </div>

    <textarea
            class="gp-textarea__area"
            [name]="name"
            [cols]="cols"
            [rows]="rows"
            [disabled]="disabled"
            [(ngModel)]="value"
            (ngModelChange)="change()"
    ></textarea>

    <!--TODO: AlexFoxJS: если надо будет - maxLength верстка-->

</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-textarea"
 */
.gp-textarea {
  display: inline-block;
  width: 100%; }
  .gp-textarea--success textarea.gp-textarea__area:focus {
    border-color: #00afec;
    outline-color: #00afec; }
  .gp-textarea--success .gp-textarea__title {
    color: #00afec; }
  .gp-textarea--error textarea.gp-textarea__area:focus {
    border-color: #f35252;
    outline-color: #f35252; }
  .gp-textarea--error .gp-textarea__title {
    color: #f35252; }
  .gp-textarea--error .gp-textarea__error {
    display: block; }
  .gp-textarea--disabled textarea.gp-textarea__area {
    cursor: not-allowed;
    color: #b5b5b5;
    border-color: #dbdbdb;
    background-color: #f8f8f8; }
  .gp-textarea__title {
    font: 500 1.2rem/1.4rem "Roboto", sans-serif;
    margin-bottom: 0.5rem;
    color: #b5b5b5;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .gp-textarea__error {
    font: 500 1.2rem/1.4rem "Roboto", sans-serif;
    display: none;
    color: #f35252; }
  .gp-textarea__area {
    font: 1.3rem/1.5rem "Roboto", sans-serif;
    min-width: 18rem;
    width: 100%;
    padding: 0.9rem 1.5rem;
    border: 0.1rem solid #dbdbdb;
    border-radius: 0.2rem;
    background-color: var(--color-white); }
  .gp-textarea textarea::-webkit-input-placeholder {
    color: #b5b5b5; }
  .gp-textarea textarea:-ms-input-placeholder {
    color: #b5b5b5; }
  .gp-textarea textarea::placeholder {
    color: #b5b5b5; }
`],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: TextareaComponent,
      multi: true
    }
  ],
})

export class TextareaComponent extends AbstractComponent implements ControlValueAccessor {

  /**
   * Высота поля в строках текста
   *
   * @type {number}
   */
  @Input() rows: number;

  /**
   * Ширина поля в символах
   *
   * @type {number}
   */
  @Input() cols: number;

  /**
   * Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать
   *
   * @type {string}
   */
  @Input() name: string = '';

  /**
   * Заголовок компонента
   *
   * @type {string}
   */
  @Input() title: string = '';

  /**
   * Текст ошибки
   *
   * @type {boolean}
   */
  @Input() error: string | boolean = false;

  /**
   * Текущее значение
   *
   * @type {string}
   */
  @Input() value: string;

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

  // TODO: если добавят
  @Input() maxLength: number;

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

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

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

  propagateChange = (_: any) => {
  }

  registerOnTouched(fn: any): void {
  }

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

  change(): void {
    this.propagateChange(this.value);
  }

  showErrorText(): boolean {
    return ((typeof this.error === 'string') && !!this.error);
  }

}