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

@Component({
    selector: 'gp-checkbox',
    template: `
<div class="gp-checkbox flex {{extraClass}}">
  <label class="gp-checkbox__label flex flex--align-center width-full cursor-pointer">
    <input type="checkbox"
           class="gp-checkbox__input"
           hidden
           [checked]="checked"
           [(ngModel)]="checked"
           (ngModelChange)="change()">
    <span class="gp-checkbox__area icon icon--small icon--white icon--center-center icon--check margin--right-1"></span>
    <!--TODO: когда нарисуют, тогда текст ошибки добавить-->
    <span class="gp-checkbox__text" *ngIf="text">{{text}}</span>
    <ng-content *ngIf="!text"></ng-content>
  </label>
</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-checkbox"
 */
.gp-checkbox__input:checked + .gp-checkbox__area {
  border-color: #00afec;
  background-color: #00afec; }

.gp-checkbox__area {
  width: 2rem;
  height: 2rem;
  border: 0.1rem solid #d3d3d3;
  border-radius: 0.3rem;
  -moz-transition: all 150ms ease;
  -o-transition: all 150ms ease;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease; }

.gp-checkbox__text {
  font: 1.3rem/1.5rem "Roboto", sans-serif;
  color: #212121;
  -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: CheckboxComponent,
            multi: true
        }
    ]
})

export class CheckboxComponent extends AbstractComponent implements ControlValueAccessor, OnInit {

    private _id: string;

    /**
     * Уникальное значение
     */
    @Input() customId: string;

    /**
     * Текст компонента
     *
     * @type {string}
     */
    @Input() text: string = '';

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

    /**
     * Выбрано или нет
     *
     * @type {boolean}
     */
    @Input() checked: boolean = false;

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

    ngOnInit() {
        this._id = 'checkbox_' + (new Date()).getTime();
    }

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

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

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

    registerOnTouched(fn: any): void {
    }

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

    get id(): string {
        return !!this.customId ? this.customId : this._id;
    }

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

}