/* eslint-disable */
/* tslint:disable */
import { FeatureFlag } from '@globalpayments/vega';
import { fromEvent } from 'rxjs';

/**
 * ALL: all properties should skip the componentOnReady check
 * Set<string>: only properties in the Set should skip the componentOnReady check
 */
const COMPONENT_ON_READY_IGNORE_MAP = new Map<string, Set<string> | 'ALL'>([
  ['VEGA-TABLE', 'ALL'],
  ['VEGA-TABLE-HEAD', 'ALL'],
  ['VEGA-TABLE-HEAD-ROW', 'ALL'],
  ['VEGA-TABLE-HEAD-CELL', 'ALL'],
  ['VEGA-TABLE-BODY', 'ALL'],
  ['VEGA-TABLE-ROW', 'ALL'],
  ['VEGA-TABLE-CELL', 'ALL'],
  ['VEGA-TABLE-EXPAND-ROW', 'ALL'],
]);

const shouldSkipComponentOnReady = (componentName: string, propName: string): boolean => {
  const props: Set<string> | 'ALL' | undefined = COMPONENT_ON_READY_IGNORE_MAP.get(componentName);

  if (!props) return false;

  return props === 'ALL' || props.has(propName);
};

export const proxyInputs = (Cmp: any, inputs: string[]) => {
  const Prototype = Cmp.prototype;
  inputs.forEach(item => {
    Object.defineProperty(Prototype, item, {
      get() {
        return this.el[item];
      },
      set(val: any) {
        // Link issues: https://gethired.atlassian.net/browse/GHUI-331
        // add a beforehand checking to make sure value is only set when component is loaded
        /*
         * Update(2023/10/28): The value should be set directly, so that the initial value can be get in componentWillLoad.
         * Link issue https://gethired.atlassian.net/browse/VD-1810
         * We need to consider remove the componentOnReady
         * https://github.com/ionic-team/stencil-ds-output-targets/blob/main/packages/angular-output-target/angular-component-lib/utils.ts#L13
         */
        if (FeatureFlag.isEnabled('VEGA_FRAMEWORK.PREVENT_CALL_WATCH_METHOD_BEFORE_COMPONENT_LOAD') || this.el.classList.contains('hydrated') || shouldSkipComponentOnReady(this.el.tagName, item)) {
          this.z.runOutsideAngular(() => (this.el[item] = val));
        } else {
          this.el.componentOnReady().then(() => {
            this.z.runOutsideAngular(() => (this.el[item] = val))
          })
        }
      }
    });
  });
};

export const proxyMethods = (Cmp: any, methods: string[]) => {
  const Prototype = Cmp.prototype;
  methods.forEach(methodName => {
    Prototype[methodName] = function () {
      const args = arguments;
      return this.z.runOutsideAngular(() =>
        this.el[methodName].apply(this.el, args)
      );
    };
  });
};

export const proxyOutputs = (instance: any, el: any, events: string[]) => {
  events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
}

export const defineCustomElement = (tagName: string, customElement: any) => {
  if (
    customElement !== undefined &&
    typeof customElements !== 'undefined' &&
    !customElements.get(tagName)
  ) {
    customElements.define(tagName, customElement);
  }
}

// tslint:disable-next-line: only-arrow-functions
export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: any; methods?: any }) {
  const decorator = function (cls: any) {
    const { defineCustomElementFn, inputs, methods } = opts;

    if (defineCustomElementFn !== undefined) {
      defineCustomElementFn();
    }

    if (inputs) {
      proxyInputs(cls, inputs);
    }
    if (methods) {
      proxyMethods(cls, methods);
    }
    return cls;
  };
  return decorator;
}