import { LockOutlined } from "@ant-design/icons";
import { Space } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  recentItems: selectRecentItems,
  selectedHeader: selectSelectedHeader,
  bodyshop: selectBodyshop
});

const LockWrapper = ({ featureName, bodyshop, children, disabled = true, bypass }) => {
  let renderedChildren = children;

  //Mark the child prop as disabled.
  if (disabled && !bypass) {
    renderedChildren = React.Children.map(children, (child) => {
      if (React.isValidElement(child)) {
        return React.cloneElement(child, {
          disabled: true
        });
      }
      return child;
    });
  }

  if (bypass) {
    if (import.meta.env.DEV) {
      console.trace("*** Lock Wrapper BYPASS USED", featureName);
    }
    return <span>{children}</span>;
  }

  return HasFeatureAccess({ featureName: featureName, bodyshop }) ? (
    children
  ) : (
    <Space>
      {!HasFeatureAccess({ featureName: featureName, bodyshop }) && <LockOutlined style={{ color: "tomato" }} />}
      {renderedChildren}
    </Space>
  );
};
export default connect(mapStateToProps, null)(LockWrapper);