import { Data } from '@angular/router';
import { Validators } from '@angular/forms';
import { Component, Input, OnInit, ViewContainerRef } from '@angular/core';

import { Sizes } from '../../../shared/enums';
import { passwordValidator } from '../validators';
import { Field } from '../../../core/field/abstract';
import { confirmValidator } from '../../../shared/validators';
import { passwordIconEnum, passwordTypeEnum } from '../enums';

@Component({
    selector: 'cmn-password',
    templateUrl: './password.component.html',
})

export class PasswordComponent extends Field implements OnInit {
    @Input() public labels: Data;
    @Input() public names: string[];
    @Input() public readonly size: Sizes;
    @Input() public readonly placeholder: string;
    @Input() public readonly forceError: boolean;
    @Input() public readonly hasIcon: boolean = true;
    @Input() public readonly confirm: { control?: string, formName?: string } = {};

    public isLoaded: boolean;
    public type = passwordTypeEnum.password;
    public icon = passwordIconEnum.password;

    @Input() private readonly name: string;
    @Input() private readonly label: string;

    constructor(private readonly viewRef: ViewContainerRef) {
        super(viewRef);
    }

    public ngOnInit(): void {
        super.ngOnInit();

        if (this.name) {
            this.names = [ this.name ];
            this.labels = { [this.name]: this.label };
        }

        if (this.names) {
            console.log('names', this.names);
            this.setValidatorsForms();
        }
    }

    public toggleTypeAndIcon() {
        if (this.type === passwordTypeEnum.password) {
            this.type = passwordTypeEnum.text;
            this.icon = passwordIconEnum.text;
        } else {
            this.type = passwordTypeEnum.password;
            this.icon = passwordIconEnum.password;
        }
    }

    private setValidatorsForms() {
        for (const name of this.names) {
            const validators = name !== this.confirm.control ?
                [ Validators.required, passwordValidator ] :
                [ Validators.required, passwordValidator, confirmValidator(this.confirm.formName) ];

            console.log(name, validators);

            this.addFormValidator(name, validators);
        }

        this.isLoaded = true;
    }
}