"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ExpandablePanel = void 0;
var _react = _interopRequireWildcard(require("react"));
var _eui = require("@elastic/eui");
var _react2 = require("@emotion/react");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */

/**
 * Wrapper component that is composed of a header section and a content section.
 * The header can display an icon, a title (that can be a link), and an optional content section on the right.
 * The content section can display a loading spinner, an error message, or any other content.
 * The component can be expanded or collapsed by clicking on the chevron icon on the left of the title.
 */
const ExpandablePanel = ({
  header: {
    title,
    callback,
    iconType,
    headerContent
  },
  content: {
    loading,
    error
  } = {
    loading: false,
    error: false
  },
  expand: {
    expandable,
    expandedOnFirstRender
  } = {
    expandable: false,
    expandedOnFirstRender: false
  },
  'data-test-subj': dataTestSubj,
  children
}) => {
  const [toggleStatus, setToggleStatus] = (0, _react.useState)(expandedOnFirstRender);
  const toggleQuery = (0, _react.useCallback)(() => {
    setToggleStatus(!toggleStatus);
  }, [setToggleStatus, toggleStatus]);
  const toggleIcon = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_eui.EuiButtonIcon, {
    "data-test-subj": `${dataTestSubj}ToggleIcon`,
    "aria-label": `entity-toggle`,
    color: "text",
    display: "empty",
    iconType: toggleStatus ? 'arrowDown' : 'arrowRight',
    onClick: toggleQuery,
    size: "xs"
  }), [dataTestSubj, toggleStatus, toggleQuery]);
  const {
    euiTheme
  } = (0, _eui.useEuiTheme)();
  const headerLeftSection = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    alignItems: "center",
    gutterSize: "s",
    "data-test-subj": `${dataTestSubj}LeftSection`
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, expandable && children && toggleIcon), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiIcon, {
    color: callback ? 'primary' : 'text',
    type: iconType,
    css: (0, _react2.css)`
                margin: ${euiTheme.size.s} 0;
              `,
    "data-test-subj": `${dataTestSubj}TitleIcon`
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, callback ? /*#__PURE__*/_react.default.createElement(_eui.EuiLink, {
    css: (0, _react2.css)`
                  font-size: 12px;
                  font-weight: 700;
                `,
    "data-test-subj": `${dataTestSubj}TitleLink`,
    onClick: callback
  }, title) : /*#__PURE__*/_react.default.createElement(_eui.EuiTitle, {
    size: "xxxs"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiText, {
    "data-test-subj": `${dataTestSubj}TitleText`
  }, title))))), [dataTestSubj, expandable, children, toggleIcon, callback, iconType, euiTheme.size.s, title]);
  const headerRightSection = (0, _react.useMemo)(() => headerContent && /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false,
    css: (0, _react2.css)`
            margin-right: ${euiTheme.size.m};
          `,
    "data-test-subj": `${dataTestSubj}RightSection`
  }, headerContent), [dataTestSubj, euiTheme.size.m, headerContent]);
  const showContent = (0, _react.useMemo)(() => {
    if (!children) {
      return false;
    }
    return !expandable || expandable && toggleStatus;
  }, [children, expandable, toggleStatus]);
  const content = loading ? /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiLoadingSpinner, {
    "data-test-subj": `${dataTestSubj}Loading`
  }))) : error ? null : children;
  return /*#__PURE__*/_react.default.createElement(_eui.EuiSplitPanel.Outer, {
    grow: true,
    hasBorder: true
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiSplitPanel.Inner, {
    grow: false,
    color: "subdued",
    paddingSize: 'xs'
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    justifyContent: "spaceBetween",
    alignItems: "center"
  }, headerLeftSection, headerRightSection)), showContent && /*#__PURE__*/_react.default.createElement(_eui.EuiSplitPanel.Inner, {
    paddingSize: "none"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiPanel, {
    "data-test-subj": `${dataTestSubj}Content`
  }, content)));
};
exports.ExpandablePanel = ExpandablePanel;
ExpandablePanel.displayName = 'ExpandablePanel';