"use strict";

exports.__esModule = true;
exports.SummaryBar = void 0;
var _designSystem = require("@wix/design-system");
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@wix/bex-core/react");
var _mobxReactLite = require("mobx-react-lite");
var _useSelector = require("../../useSelector");
var _Trans = require("../Trans");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SummaryBar/SummaryBar.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const SkeletonSummaryBar = () => /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonGroup, {
  dataHook: "skeleton-summary-bar",
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 49,
    columnNumber: 3
  }
}, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
  gap: "SP4",
  height: "18px",
  verticalAlign: "middle",
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 50,
    columnNumber: 5
  }
}, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
  width: "112px",
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 51,
    columnNumber: 7
  }
}), /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
  width: "112px",
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 52,
    columnNumber: 7
  }
}), /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
  width: "112px",
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 53,
    columnNumber: 7
  }
})));
const ErrorSummaryBar = ({
  onRetry
}) => {
  const {
    translate: t,
    ...container
  } = (0, _react2.useWixPatternsContainer)();
  (0, _useSelector.useSelector)(() => container.initTask.status);
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    gap: "3px",
    dataHook: "error-summary-bar",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 67,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    weight: "thin",
    size: "small",
    skin: "standard",
    secondary: true,
    dataHook: "summary-bar-error-text",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 68,
      columnNumber: 7
    }
  }, t('cairo.table.summaryBar.loadError')), /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
    size: "small",
    weight: "thin",
    dataHook: "summary-bar-retry-button",
    onClick: onRetry,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 77,
      columnNumber: 7
    }
  }, t('cairo.table.summaryBar.loadError.cta')));
};
const SummaryBarContent = ({
  data
}) => {
  const {
    translate: t,
    ...container
  } = (0, _react2.useWixPatternsContainer)();
  (0, _useSelector.useSelector)(() => container.initTask.status);
  return /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.ItemGroup, {
    dataHook: "summary-bar-content",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 94,
      columnNumber: 5
    }
  }, data.map(({
    title,
    value
  }, index) => /*#__PURE__*/_react.default.createElement(_react.Fragment, {
    key: index,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 96,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 97,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    gap: "3px",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 98,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 99,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    weight: "thin",
    size: "small",
    skin: "standard",
    secondary: true,
    dataHook: "summary-bar-item",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 100,
      columnNumber: 17
    }
  }, /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
    i18nKey: "cairo.table.summaryBar.list.item",
    values: {
      title,
      value
    },
    components: {
      value: /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
        weight: "normal",
        size: "small",
        skin: "standard",
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 115,
          columnNumber: 25
        }
      })
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 107,
      columnNumber: 19
    }
  }))))), /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 123,
      columnNumber: 11
    }
  }, index !== data.length - 1 && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    height: "18px",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 125,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
    direction: "vertical",
    dataHook: "summary-bar-divider",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 126,
      columnNumber: 17
    }
  }))))));
};
const _SummaryBar = props => {
  const {
    data,
    status,
    onRetry
  } = props;
  const contentByStatus = {
    loading: /*#__PURE__*/_react.default.createElement(SkeletonSummaryBar, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 139,
        columnNumber: 14
      }
    }),
    error: /*#__PURE__*/_react.default.createElement(ErrorSummaryBar, {
      onRetry: onRetry,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 140,
        columnNumber: 12
      }
    }),
    success: /*#__PURE__*/_react.default.createElement(SummaryBarContent, {
      data: data,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 141,
        columnNumber: 14
      }
    })
  };
  return /*#__PURE__*/_react.default.createElement(_designSystem.Table.SubToolbar, {
    dataHook: "summary-bar",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 145,
      columnNumber: 5
    }
  }, contentByStatus[status]);
};
const SummaryBar = exports.SummaryBar = (0, _mobxReactLite.observer)(_SummaryBar);
//# sourceMappingURL=SummaryBar.js.map