"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AspectPage = AspectPage;
function _harmonyUi() {
  const data = require("@teambit/harmony.ui.aspect-box");
  _harmonyUi = function () {
    return data;
  };
  return data;
}
function _react() {
  const data = _interopRequireWildcard(require("react"));
  _react = function () {
    return data;
  };
  return data;
}
function _uiFoundationUiHooks() {
  const data = require("@teambit/ui-foundation.ui.hooks.use-data-query");
  _uiFoundationUiHooks = function () {
    return data;
  };
  return data;
}
function _client() {
  const data = require("@apollo/client");
  _client = function () {
    return data;
  };
  return data;
}
function _designUi() {
  const data = require("@teambit/design.ui.empty-box");
  _designUi = function () {
    return data;
  };
  return data;
}
function _documenterUi() {
  const data = require("@teambit/documenter.ui.heading");
  _documenterUi = function () {
    return data;
  };
  return data;
}
function _documenterUi2() {
  const data = require("@teambit/documenter.ui.separator");
  _documenterUi2 = function () {
    return data;
  };
  return data;
}
function _aspectPageModule() {
  const data = _interopRequireDefault(require("./aspect-page.module.scss"));
  _aspectPageModule = function () {
    return data;
  };
  return data;
}
function _context() {
  const data = require("../context");
  _context = function () {
    return data;
  };
  return data;
}
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const GET_COMPONENT = (0, _client().gql)`
  query ($id: String!) {
    getHost {
      get(id: $id) {
        aspects {
          id
          config
          data
          icon
        }
      }
    }
  }
`;

// TODO: get the docs domain from the community aspect and pass it here as a prop
function AspectPage() {
  const component = (0, _react().useContext)(_context().ComponentContext);
  const {
    data
  } = (0, _uiFoundationUiHooks().useDataQuery)(GET_COMPONENT, {
    variables: {
      id: component.id.toString()
    }
  });
  const aspectList = data?.getHost?.get?.aspects;
  if (aspectList && aspectList.length === 0) {
    return /*#__PURE__*/_react().default.createElement(_designUi().EmptyBox, {
      title: "This component is new and doesn\u2019t have any aspects.",
      linkText: "Learn more about component aspects",
      link: `https://bit.dev/docs/extending-bit/aspect-overview`
    });
  }
  return /*#__PURE__*/_react().default.createElement("div", {
    className: _aspectPageModule().default.aspectPage
  }, /*#__PURE__*/_react().default.createElement("div", null, /*#__PURE__*/_react().default.createElement(_documenterUi().H1, {
    className: _aspectPageModule().default.title
  }, "Configuration"), /*#__PURE__*/_react().default.createElement(_documenterUi2().Separator, {
    className: _aspectPageModule().default.separator
  }), aspectList && aspectList.map(aspect => {
    return /*#__PURE__*/_react().default.createElement(_harmonyUi().AspectBox, {
      key: aspect.id,
      className: _aspectPageModule().default.aspectBox,
      name: aspect.id,
      icon: aspect.icon,
      config: aspect.config,
      data: aspect.data
    });
  })));
}

//# sourceMappingURL=aspect-page.js.map