export class SimpleEventEmitter {
  _behaviourArray;
  init(behaviourArray) {
    this._behaviourArray = behaviourArray;
  }
  callMethodInBehaviour(methodName, behaviourInstance, args = []) {
    const behaviourMethod = behaviourInstance[methodName];
    if (behaviourMethod) {
      behaviourMethod.apply(behaviourInstance, args);
    }
  }
  callMethodInAllBehaviours(methodName, args = []) {
    this._behaviourArray.forEach(beh => {
      if (beh[methodName]) {
        beh[methodName](...args);
      }
    });
  }
}

export const LifeCycleEvents = {
  BEHAVIOUR_ADDED: 'behaviourAdded',
  COMPONENT_INITIALIZED: 'componentInitialized',
  COMPONENT_DID_MOUNT: 'componentDidMount',
  COMPONENT_DID_UPDATE: 'componentDidUpdate',
  // для вызова из useEfect()
  COMPONENT_DID_UPDATE_EFFECT: 'componentDidUpdateEffect',
  BEHAVIOUR_WILL_REMOVED: 'behaviourWillRemoved',
  COMPONENT_WILL_UNMOUNT: 'componentWillUnmount',
  // остальные события не реализованы в примерах
};

import { LifeCycleEvents } from './LifeCycleEvents';
import { SimpleEventEmitter } from './eventEmitters/SimpleEventEmitter';
export class AbstractContainer {
  _eventEmitter;
  _config;
  // Array with all behaviours of component
  behaviourArray = [];
  // Object (dictionary) with all behaviours of container.
  // To simplify access to behaviour by name
  behs = {};
  // Object (dictionary) with pairs [behaviourName]: behParamsObject
  behsParams = {};
  get eventEmitter() {
    return this._eventEmitter;
  }
  get config() {
    return this._config;
  }
  get state() {
    console.error('container state getter is not implemented');
  }
  get props() {
    console.error('container props getter is not implemented');
  }
  init(config, props) {
    this._eventEmitter = new SimpleEventEmitter();
    this._eventEmitter.init(this.behaviourArray);
    this._config = config;
    this._createBehaviours(props);
  }
  _createBehaviours(props) {
    const defaultBehaviours = props?.defaultBehaviours;
    const allBehParams = defaultBehaviours
      || this.config.behaviours || [];
    // create behaviours
    allBehParams.forEach(oneBehParams => {
      const { behaviour, initData, ...passedBehParams } = oneBehParams;
      this.addBehaviour(behaviour, props, initData, passedBehParams);
    });
    this._eventEmitter.callMethodInAllBehaviours(
      LifeCycleEvents.COMPONENT_INITIALIZED,
      [props],
    );
  }
  setState(stateOrUpdater){
    console.error('container setState is not implemented');
  }
  addBehaviour(behaviour, props, initData, behaviourParams = {}) {
    const newBeh = new behaviour();
    this.behaviourArray.push(newBeh);
    this.behs[ newBeh.name ] = newBeh;
    this.behsParams[ newBeh.name ] = behaviourParams;
    if (newBeh.init) {
      newBeh.init(this, props, initData, behaviourParams);
    }
    this._eventEmitter.callMethodInBehaviour(
      LifeCycleEvents.BEHAVIOUR_ADDED, newBeh);
    return newBeh;
  }
  removeBehaviour(behaviourInstance) {
    const foundIndex = this.behaviourArray.indexOf(behaviourInstance);
    if (foundIndex > -1) {
      this._eventEmitter.callMethodInBehaviour(
        LifeCycleEvents.BEHAVIOUR_WILL_REMOVED, behaviourInstance);
      this.behaviourArray.splice(foundIndex, 1);
      delete this.behs[behaviourInstance.name];
      delete this.behsParams[behaviourInstance.name];
    } else {
      console.warn(
        `removeBehaviour error: ${behaviourInstance.name} not found`
      );
    }
  }
  // Return all behaviours renderData mixed in single object.
  _mapToMixedRenderData() {
    let retRenderData = this.behaviourArray.reduce((mixedData, beh) => {
      const behRenderData = beh.mapToRenderData();
      Object.assign(mixedData, behRenderData);
      return mixedData;
    }, {});
    return retRenderData;
  }
  render() {
    const renderFunc = this.config.render
      ? this.config.render
      : ({ props }) => props?.children;
    return renderFunc({
      props: this.props,
      ...this._mapToMixedRenderData(this)
    });
  };
}

import { AbstractContainer } from '../AbstractContainer';
export class ContainerForClassComponent extends AbstractContainer {
  _component;
  get state() {
    return this._component.state;
  }
  get props() {
    return this._component.props;
  }
  setState = (stateOrUpdater) =>{
    this._component.setState(stateOrUpdater);
  };
  init(config, props, component) {
    this._component = component;
    super.init(config, props);
  }
}
import { AbstractContainer } from '../AbstractContainer';
export class ContainerForFunctionalComponent
  extends AbstractContainer {
  _props;
  _state;
  init(config, props, state, setState) {
    this._props = props;
    this._state = state;
    this.setState = setState;
    super.init(config, props);
  }
  get state() {
    return this._state;
  }
  set state(state) {
     this._state = state;
  }
  get props() {
    return this._props;
  }
  set props(props) {
    this._props = props;
  }
}

import { LifeCycleEvents } from '../LifeCycleEvents';
import { ContainerForClassComponent } from './ContainerForClassComponent';
class ComponentWithContainer extends React.Component {
  _container;
  constructor(props, context, config) {
    super(props, context);
    this._container = new ContainerForClassComponent();
    this._container.init(config, props, this);
  }
  componentDidMount() {
    this._container.eventEmitter.callMethodInAllBehaviours(
      LifeCycleEvents.COMPONENT_DID_MOUNT,
    );
  }
  componentDidUpdate(...args) {
    this._container.eventEmitter.callMethodInAllBehaviours(
      LifeCycleEvents.COMPONENT_DID_UPDATE, args,
    );
  }
  componentWillUnmount() {
    this._container.eventEmitter.callMethodInAllBehaviours(
      LifeCycleEvents.BEHAVIOUR_WILL_REMOVED,
    );
    this._container.eventEmitter.callMethodInAllBehaviours(
      LifeCycleEvents.COMPONENT_WILL_UNMOUNT,
    );
  }
  render() {
    return this._container.render();
  }
}
export const createComponentWithContainer = (componentName, config) => {
  return class extends ComponentWithContainer {
    constructor(props, context) {
      super(props, context, config);
    }
    static displayName = componentName;
  };
};

import { useRef, useState, useEffect } from 'react';
import { LifeCycleEvents } from '../LifeCycleEvents';
import { ContainerForFunctionalComponent }
  from './ContainerForFunctionalComponent';
export const useBehaviours = (config = {behaviours: []}, props) =>{
  let isFirstRender = false;
  const ref = useRef();
  // create shared state
  const [state, setState] = useState({});
  // get exist or get new passed initial config
  const initialConfig = ref.current
    ? ref.current.config
    : config;
  if (!ref.current) {
    ref.current = new ContainerForFunctionalComponent();
    ref.current.init(initialConfig, props, state, setState);
    isFirstRender = true;
  } else {
    // update state and props in container
    ref.current.state = state;
    ref.current.props = props;
  }
  const container = ref.current;
  callLifeCycleEvents(
    container.eventEmitter, initialConfig, isFirstRender);
  return container.render();
};
const callLifeCycleEvents =
  (eventEmitter, initialConfig, isFirstRender) => {
  // on mount, unmount
  useEffect(() => {
    eventEmitter.callMethodInAllBehaviours(
      LifeCycleEvents.COMPONENT_DID_MOUNT);
    return () => {
      eventEmitter.callMethodInAllBehaviours(
        LifeCycleEvents.BEHAVIOUR_WILL_REMOVED);
      eventEmitter.callMethodInAllBehaviours(
        LifeCycleEvents.COMPONENT_WILL_UNMOUNT);
    }
  }, []);
  // on update
  useEffect(() => {
    if (!isFirstRender) {
      eventEmitter.callMethodInAllBehaviours(
        LifeCycleEvents.COMPONENT_DID_UPDATE_EFFECT);
    }
  });
};

import lowerFirst from "lodash/lowerFirst";
export class BaseBehaviour {
  // необязательное поле на тот случай, если понадобиться сравнивать
  // по типу.
  type = Object.getPrototypeOf(this).constructor.name;
  // используется как идентификатор
  name = lowerFirst(this.type);
  // Данные и функции, которые передается в компонент через функцию
  // mapToRenderData. Используется когда нужно, чтобы при каждом
  // рендеринге не создавались новые объекты и функции, а также для
  // их передачи в props дочерних компонентов. Таких образом, это может
  // помочь избежать лишних перерисовок. useCallback в таком случае
  // становится ненужным.
  passedToRender = {};
  init(container, props, initData = {}, config) {
    this.container = container;
    if (initData.defaultState) {
      this.defaultState = initData.defaultState;
    }
  }
  // об этом позже
  get ownProps() {
    const propBehaviourName = `bh-${this.name}`;
    return this.container.props?.[propBehaviourName];
  }
  // Эмуляция собственного состояния для каждого behaviour.
  // На самом деле используется объект-словарь, хранящийся в контейнере
  // или в компоненте. Каждое поле в объекте-словаре указывает
  // на состояние в одном из behaviour. Состояние behaviour передается
  // в компонент с помощью метода mapToRenderData.
  get state() {
    const defaultValue = this.defaultState;
    return this.container.state
      ? this.container.state[this.name] || defaultValue
      : defaultValue;
  }
  // Изменяет состояние behaviour и вызывает обновление компонента.
  // Cигнатура этого метода эквивалентна методу setState
  // компонента-класса.
  setState(stateOrUpdater, callback) {
    if (typeof stateOrUpdater === 'function') {
      const updater = stateOrUpdater;
      this.container.setState((prevState) => {
          return {
            ...prevState,
            [ this.name ]: updater(prevState[ this.name ])
          };
        },
        callback);
      return;
    }
    const newPartialState = stateOrUpdater;
    this.container.setState((prevState) => {
      return {
        ...prevState,
        [this.name]: newPartialState
      };
    });
  }
  // Возвращает данные и функции, которые в итоге передадуться
  // в функцию render, указанную в config компоненте
  mapToRenderData() {
    return {
      ...this.state,
      ...this.passedToRender,
    };
  }
  // Очистка состояния при удалении
  behaviourWillRemoved() {
    this.setState(undefined);
  }
}

import { createComponentWithContainer }
  from "../core/forClassComponent/createComponentWithContainer";
import { BaseBehaviour } from "../core/BaseBehaviour";
// Здесь пишется логика компонента и описываются данные, используемые
// в функции render
class CounterBehaviour extends BaseBehaviour {
  defaultState = { count: 0 };
  passedToRender = {
    setCount: value => {
      this.setState({ count: value });
    }
  };
}
export const CounterExample = createComponentWithContainer(
  'CounterExample', {
    behaviours: [{ behaviour: CounterBehaviour }],
    render: ({ count, setCount }) => (
      <>
        <h3>Counter Example</h3>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>Click me</button>
      </>
    ),
  });
export const CounterExampleWithHooks = (props) => {
  return useBehaviours({
      behaviours: [{ behaviour: CounterBehaviour }],
      render: ({ count, setCount }) => (
        <>
          <h3>Counter Example</h3>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </>
      ),
    },
    props);
};

get ownProps() {
  const propBehaviourName = `bh-${this.name}`;
  return this.container.props?.[propBehaviourName];
}

<Form
  bh-bindModel={customModel}
  bh-formController={{onSubmit: customAction }}
/>

_createBehaviours(props) {
  const defaultBehaviours = props?.defaultBehaviours;
  const allBehParams = defaultBehaviours || this.config.behaviours || [];

<CounterExample defaultBehaviours={[
    {behaviour: CounterBehaviour, initData: {count: 0}
  ]}
/>

const renderButtonWeb = ({ propA, propB, ...props}) => (<div> ... </div>);
const renderButtonNative = ({ propA, propB, ...props}) => (<div> ... </div>);
const WebButton = createContainerComponent("WebButton", {
  behaviours: [
     { behaviour: CommonButtonMethods },
     { behaviour: WebButtonMethods }
  ],
  render: renderButtonWeb
});
const NativeButton = createContainerComponent("NativeButton", {
   behaviours: [
     { behaviour: CommonButtonMethods },
     { behaviour: NativeButtonMethods }
   ],
   render: renderButtonNative
});