import * as withSideEffect from "react-side-effect";

interface DataLayerProps {
  data: Object;
}

export const reducePropsToState = (propsList: DataLayerProps[])  => propsList.reduce((memo, m) => ({
  ...memo,
  ...m.data,
}), {});

export const handleStateChangeOnClient = (state) => {
  if (typeof window !== "undefined" && window.lp) {
    window.lp.analytics.dataLayer[0] = state;
  }
};

export const createDataLayerScript = state => `
  window.lp = window.lp || {};
  window.lp.analytics = window.lp.analytics || {};
  window.lp.analytics.dataLayer = [${JSON.stringify(state)}];
  ${process.env.NODE_ENV !== "production" ? `window.lp.analytics.send = function(options) {
    console.group("GTM"); console.info(options); console.groupEnd("GTM");
  }` : ""}
  window.dataLayer = window.lp.analytics.dataLayer;
`;

const mapStateOnServer = state => createDataLayerScript(state);

export default withSideEffect(
  reducePropsToState,
  handleStateChangeOnClient,
  mapStateOnServer,
)(() => null);