import { Component, ElementRef, Input, SimpleChanges } from '@angular/core';
import {
  ElementAttribute,
  IContactLinkButton,
  Linker,
} from '@dilvant/front-lib';
import { LayoutElementEventListener } from './../../../../classes/LayoutElementEventListener';
import { IAttributes } from './../../../../interfaces/IAttributes';

@Component({
  selector: 'button-link',
  templateUrl: './button-link.component.html',
})
export class ButtonLinkComponent {
  @Input() attr: any;
  @Input() iconbtn: any;
  @Input() link: any;
  @Input() section: any;

  stylesButton: any;

  constructor(private _elementRef: ElementRef<HTMLElement>) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['attr'] && !changes['attr'].firstChange) {
      this._setAttributes();

      setTimeout(() => {
        this._setStyles();
      }, 0);

      return;
    }

    if (changes['link'] && changes['link'].currentValue) {
      this._setStyles(changes['link'].currentValue);
    }

    this.link = changes['link'] && changes['link'].currentValue;

    if (this.link?.attributes) {
      this.stylesButton = this.getStyles(this.link.attributes);

      setTimeout(() => {
        this._setStyles(changes['link'].currentValue);
        this._setAttributes();
      }, 0);
    }

    if (!changes['section'] || changes['section'].firstChange) return;

    const prev = changes['section'].previousValue.attributes.styles
      .find((r: any) => r.key === 'grid-template-columns')
      .value.replace(' ', '');

    const current = changes['section'].currentValue.attributes.styles
      .find((r: any) => r.key === 'grid-template-columns')
      .value.replace(' ', '');

    if (prev === current) return;

    setTimeout(() => {
      const { nativeElement } = this._elementRef;

      const label = nativeElement.querySelector<HTMLElement>('p.label')!;

      if (label) LayoutElementEventListener.setListener(label);
    }, 0);
  }

  ngAfterViewInit(): void {
    this._setStyles();

    setTimeout(() => {
      this._setAttributes();
    }, 0);
  }

  get isOneColumn(): boolean {
    return this._checkGridByValue(1)!;
  }

  get isTwoColumn(): boolean {
    return this._checkGridByValue(2)!;
  }

  get isThreeColumn(): boolean {
    return this._checkGridByValue(3)!;
  }

  private _checkGridByValue(value: any) {
    let grid = this._getkGridColumn();
    if (!grid) return;

    let gridValue: string = grid?.value || '';
    gridValue = gridValue.replace(' ', '');

    return gridValue.indexOf(`repeat(${value},1fr)`) > -1;
  }

  private _getkGridColumn() {
    let attr = this.section.attributes;

    if (!attr || !attr.styles) return;

    let grid = attr.styles.find((s: any) => s.key === 'grid-template-columns');

    return grid;
  }

  private _setStyles(link?: any) {
    const { nativeElement } = this._elementRef;

    const container = nativeElement.querySelector<HTMLElement>('.button');
    const iconBtn = nativeElement.querySelector<HTMLElement>('i');
    const labelBtn = nativeElement.querySelector<HTMLElement>(
      '.label:not(.d-none)'
    );

    if (container) container.className = 'button';

    //* set container attributes
    if (container && this.link?.attributes) {
      ElementAttribute.setAll(
        container,
        link?.attributes || this.link.attributes
      );

      ElementAttribute.setStyles(
        container,
        link?.attributes?.styles || this.link.attributes.styles
      );
    }

    //* set icon attributes
    if (this.link?.icon?.attributes && iconBtn)
      ElementAttribute.setAll(
        iconBtn,
        link?.icon?.attributes || this.link.icon.attributes
      );

    //* set label attributes
    if (this.link?.label?.attributes && labelBtn)
      ElementAttribute.setAll(
        labelBtn,
        link?.label?.attributes || this.link.label.attributes
      );
  }

  private isEditable(attributes: IAttributes) {
    if (!attributes || !attributes.dataset) return false;

    let data = attributes.dataset.find((d) => d.key === 'selectable');

    return !!(data && data.value);
  }

  action(link: IContactLinkButton) {
    if (!this.isEditable((<any>link)['attributes'])) {
      Linker.link(link);
    }
  }

  getButtonText() {
    let text = this.link?.label?.text;
    const properties = this.link?.label?.attributes?.properties;

    if (properties) {
      text = properties.find((prop: any) => prop.key === 'innerHTML').value;
    }

    return text;
  }

  getStyles(text: any) {
    ElementAttribute.getStyles(text);
  }

  resetStyles(styles: any) {
    let buttonElem = <HTMLElement>(
      this._elementRef.nativeElement.getElementsByClassName('button')[0]
    );

    ElementAttribute.setStyles(buttonElem, <any>styles);
  }

  private _setAttributes() {
    let buttonElem = this._elementRef.nativeElement.querySelector('.button');

    if (!buttonElem) {
      buttonElem = this._elementRef.nativeElement.querySelector('.button');
    }

    const classShape = buttonElem?.classList[1];

    if (classShape) {
      buttonElem?.classList.remove(`${classShape}`);
    }

    if (buttonElem && this.link?.attributes) {
      ElementAttribute.setAll(buttonElem, this.link.attributes);
    }
  }
}