import { ElementRef } from '@angular/core';
import { Storage } from '@dilvant/front-lib';
import { SubscriptionBin } from '@dilvant/utils';
import { debounceTime } from 'rxjs/operators';
import { STORAGE_KEYS } from '../constants/STORAGE';
import { CrudButton } from '../cruds/CrudButton';
import { IApp } from '../interfaces/IApp';
import { IElementRef } from '../interfaces/IElementRef';
import { IButton, ISection } from '../interfaces/ISection';
import { SectionsSubscriber } from './SectionSubscriber';
import { SortElement } from './SortElements';

export class SectionEditorButtons extends SortElement {
  section!: IElementRef;
  itemsBtn!: { element: HTMLElement; item: IButton }[];

  subscriptionBin = new SubscriptionBin();
  constructor(private _elementRef: ElementRef<HTMLElement>) {
    super();
  }

  async viewButton() {
    const { _id } = this.section.element.dataset;
    if (!_id) return;
    await CrudButton.createButon({ sectionId: _id });
  }

  async getOrder(section: any) {
    const { nativeElement } = this._elementRef;
    const sectionButtons =
      nativeElement.querySelectorAll<HTMLElement>('.section-buttons');

    const orders = Array.from(sectionButtons).map((res, index) => {
      return {
        _id: res.dataset['_id']!,
        order: index + 1,
      };
    });

    const sdkResponse = await CrudButton.sortButton(
      orders,
      section?.dataset?._id
    );
  }

  async setButtons(section: any): Promise<IElementRef[] | undefined> {
    const dataset = section?.dataset;

    const app: IApp = await Storage.get(STORAGE_KEYS.APP);

    const sectionJson: ISection = app.sections!.find(
      (s) => s._id === dataset._id
    )!;

    const buttons = sectionJson.buttons;

    if (!buttons) return;

    const selectors = {
      'contact-links': 'button-link',
      'add-to-contacts': 'button.add-contacts-button',
      'share-links': '.button',
    };

    const arr = section.querySelectorAll((<any>selectors)[dataset.type]);

    const arrFrom = Array.from<HTMLElement>(arr);

    const a = arrFrom
      .map<IElementRef | undefined>((ele) => {
        let e = ele.querySelector<HTMLElement>(
          '[data-_id] [data-type="button"]'
        );

        if (ele.dataset['type'] === 'button' && ele.dataset['_id']) {
          e = ele;
        }
        if (!e) return;

        const buttonId = e.dataset['_id'];
        const findedButton = buttons.find((button) => button._id === buttonId);

        if (!(ele && findedButton)) return;

        return { element: ele, item: findedButton };
      })
      .filter((res) => res)
      .sort((a, b) => a?.item.order! - b?.item.order!);

    return <IElementRef[]>a;
  }

  initTriggers() {
    this.subscriptionBin.add = [
      this.onInsertBeforeEvent
        .pipe(debounceTime(500))
        .subscribe(({ currentElementDraggedRef, elementReferenceParent }) => {
          currentElementDraggedRef &&
            elementReferenceParent &&
            this.section.element.insertBefore(
              currentElementDraggedRef,
              elementReferenceParent
            );

          this.getOrder(this.section.element);
        }),

      this.onAppendElementEvent
        .pipe(debounceTime(500))
        .subscribe(({ currentElementDraggedRef }) => {
          currentElementDraggedRef &&
            this.section.element.appendChild(currentElementDraggedRef);

          this.getOrder(this.section.element);
        }),

      SectionsSubscriber.onChangeDectect().subscribe(
        async (sectionId: string) => {
          if (
            !sectionId ||
            !this.section?.element?.dataset['_id'] ||
            sectionId !== this.section?.element?.dataset['_id']
          )
            return;

          await new Promise((r) => setTimeout(r, 0));

          this.itemsBtn = (await this.setButtons(this.section.element))!;
        }
      ),
    ];
  }
}