import {
    AfterViewChecked,
    Component,
    DoCheck,
    ElementRef,
    EventEmitter,
    Inject,
    Input,
    OnInit,
    Output
} from '@angular/core';

import { Sizes } from '../../../../shared/enums';

@Component({
    selector: 'cmn-input-tag',
    templateUrl: './input-tag.component.html',
    styleUrls: [ './input-tag.component.scss' ],
})

export class InputTagComponent implements OnInit, AfterViewChecked, DoCheck {
    @Input() public value: string;
    @Input() public readonly size: Sizes;
    @Input() public readonly placeholder: string = '';

    @Output('onChange') public readonly fireChange: EventEmitter<string> = new EventEmitter<string>();

    public doChecked: boolean;

    private readonly tagClass = 'padding: 0; margin-bottom: 0 !important; margin-top: 0 !important; ';

    constructor(
        private readonly element: ElementRef,
        @Inject('window') private readonly window,
    ) {}

    public ngOnInit(): void {
        this.window.bulmaTagsinput.attach();
    }

    public ngDoCheck(): void {
        const tagInputElement = this.element.nativeElement.firstChild.childNodes[0] || {};

        this.doChecked = this.doChecked || this.value === tagInputElement.value;

        if (this.doChecked && this.value !== tagInputElement.value) {
            const elements = tagInputElement.value.split(',');

            if (elements.indexOf(elements[elements.length - 1]) < 0) {
                this.value = tagInputElement.value;

                this.fireChange.emit(this.value);
            } else {
                tagInputElement.value = this.value;

                this.removeTag(this.element.nativeElement.firstChild.childNodes[1].childNodes, elements[elements.length - 1]);
            }
        }
    }

    public ngAfterViewChecked(): void {
        const tagInputElement = this.element.nativeElement.firstChild.childNodes[1];

        if (tagInputElement) {
            this.addClass(tagInputElement, this.size);

            tagInputElement.setAttribute('style', 'margin-bottom: 0; padding: 0 14px');

            this.setLargeSizeInTags(tagInputElement.childNodes);

            this.addClass(tagInputElement.lastChild, 'input');
            this.addClass(tagInputElement.lastChild, this.size);

            tagInputElement.lastChild.setAttribute('placeholder', '');
            tagInputElement.lastChild.setAttribute('size', tagInputElement.lastChild.value.length);
            tagInputElement.lastChild.setAttribute('style', `${ this.tagClass } ` +
                `width: ${ tagInputElement.lastChild.value.length ? 'auto' : '5px' };`);
        }
    }

    private removeTag(childNodes: Node[], text: string) {
        let count = 0;

        for (const element of childNodes) {
            if (element.childNodes[0] && element.childNodes[0].childNodes[0].textContent.trim() === text) {
                count > 0 ? (element as any).remove() : count++;
            }
        }

        (childNodes[childNodes.length - 2].childNodes[0].childNodes[0] as any).classList.add('is-active');
    }

    private setLargeSizeInTags(childNodes: Node[]) {
        for (const element of childNodes) {
            if (element.childNodes[0]) {
                (element.childNodes[0] as any).setAttribute('style', 'margin: .15rem 0 0 !important;');

                this.addClass(element.childNodes[0].childNodes[0], this.size);
                this.addClass(element.childNodes[0].childNodes[1], this.size);
            }
        }
    }

    private addClass = (element: any, clazz: string) => {
        element.classList.remove(clazz);
        element.classList.add(clazz);
    }
}