import {Component, Input, ElementRef, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

import {AbstractComponent} from 'gp-admin-abstract';

@Component({
    selector: 'gp-input',
    template: `
<div
  class="input"
  [ngClass]="[
    !!state ? 'input--'+state : '',
    !!disabled ? 'input--disabled' : '',
    value !== '' ? 'input--filled' : ''
  ]"
>
  <!-- success / error / filled -->

  <div class="flex flex--content-between">
    <div class="input__title">{{ title }}</div>
    <div class="input__error">{{ errorText }}</div>
  </div>

  <input
    [type]="type"
    class="input__area"
    [(ngModel)]="value"
    (ngModelChange)="change()"
    [placeholder]="placeholder"
    [disabled]="disabled"
  >

</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-input"
 */
.gp-input {
  min-width: 18rem; }
  .gp-input--success input.gp-input__area {
    border-color: #00afec; }
  .gp-input--success .gp-input__title {
    color: #00afec; }
  .gp-input--error input.gp-input__area {
    border-color: #f35252; }
  .gp-input--error .gp-input__title {
    color: #f35252; }
  .gp-input--error .gp-input__error {
    display: block; }
  .gp-input--disabled {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .gp-input--disabled input.gp-input__area {
      cursor: not-allowed;
      color: #b5b5b5;
      border-color: #dbdbdb;
      background-color: #f8f8f8; }
  .gp-input__title {
    font: 400 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-input__error {
    font: 400 1.2rem/1.4rem "Roboto", sans-serif;
    display: none;
    color: #f35252; }
  .gp-input__area {
    font: 1.3rem/1.5rem "Roboto", sans-serif;
    width: 100%;
    padding: 1rem 1.5rem;
    color: #212121;
    border: 0.1rem solid #dbdbdb;
    border-radius: 0.02rem;
    background-color: var(--color-white); }
    .gp-input__area[type="password"] {
      letter-spacing: 0.5rem;
      font-weight: 900; }
  .gp-input input::-webkit-input-placeholder,
  .gp-input input:-ms-input-placeholder,
  .gp-input input::placeholder {
    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; }
`],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => InputComponent),
            multi: true
        }
    ],
})

export class InputComponent extends AbstractComponent implements ControlValueAccessor {
    @Input() title: string = '';
    @Input() type: string = '';
    @Input() inputName: string = '';
    @Input() value: string = '';
    @Input() placeholder: string = '';
    @Input() disabled: boolean = false;
    @Input() state: string = '';
    @Input() errorText: string;

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

    propagateChange = (_: any) => {
    };

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

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

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

    registerOnTouched(fn: any): void {
    }
}