import { getData } from "@helpers/alpine";

import { nameFunction } from "@helpers/lang.js";
import { withAttrs, withOptions } from "@js/base/mixins";

function CocoComponent(name, fn) {
  const func = nameFunction(name, (...args) => {
    const data = fn(...args);

    Object.defineProperties(data, {
      $parent: {
        get() {
          return getData(this.$root.parentElement);
        },
      },
    });

    data.$options = {};

    if (data.use === false) return data;

    // TODO - remove all mixin code below once directives are ready

    const originalInit = data.init;
    const mixins = [withAttrs(), withOptions(), ...(data.use || [])];

    mixins.forEach((mixin) => {
      if (mixin.props) {
        mixin.props.forEach((prop) => {
          if (!data[prop]) {
            data[prop] = null;
          }
        });
      }
    });

    return Object.assign(data, {
      init() {
        mixins.forEach((mixin) => mixin(this));

        if (originalInit) {
          originalInit.call(this);
        }
      },
    });
  });

  func.component = true;

  return func;
}

export { CocoComponent };