import dayjs from "../../utils/day";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import InstanceRenderManager from "../../utils/instanceRenderMgr";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

function FeatureWrapper({
  bodyshop,
  featureName,
  noauth,
  blurContent = false,
  children,
  upsellComponent,
  ...restProps
}) {
  const { t } = useTranslation();

  if (upsellComponent) {
    console.error("Upsell component passed in. This is not yet implemented.");
  }

  if (HasFeatureAccess({ featureName, bodyshop })) return children;

  if (blurContent) {
    const childrenWithBlurProps = React.Children.map(children, (child) => {
      // Checking isValidElement is the safe way and avoids a
      // typescript error too.
      if (React.isValidElement(child)) {
        return React.cloneElement(child, { blur: true });
      }
      return child;
    });
    return childrenWithBlurProps;
  } else {
    return (
      noauth || (
        <AlertComponent
          message={t("general.messages.nofeatureaccess", {
            app: InstanceRenderManager({
              imex: "$t(titles.imexonline)",
              rome: "$t(titles.romeonline)"
            })
          })}
          type="warning"
        />
      )
    );
  }
}

export function HasFeatureAccess({ featureName, bodyshop, debug = false }) {
  if (debug) {
    console.trace(`*** HasFeatureAccessFunction called with feature << ${featureName} >>`);
  }
  return bodyshop?.features?.allAccess || dayjs(bodyshop?.features[featureName]).isAfter(dayjs());
}

export default connect(mapStateToProps, null)(FeatureWrapper);