"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _core = require("@emotion/core");

var _index = require("../index");

var _ChartTitle = _interopRequireDefault(require("../ChartTitle"));

var _Logo = _interopRequireDefault(require("../Logo/Logo"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n    margin: 0 auto;\n    width: 100%;\n    max-width: 900px;\n    height: calc(100vw / ", ");\n    max-height: ", "px;\n    background-color: ", ";\n    display: grid;\n    justify-items: center;\n    align-items: center;\n  "]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n    position: relative;\n    padding-top: ", "%;\n    height: 100%;\n  "]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n    margin: 0 auto;\n    max-width: 900px;\n    width: 100%;\n    ", ";\n  "]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n    margin: 0;\n  "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  text-align: center;\n  background: #fdd;\n  height: 100%;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var chartError = (0, _core.css)(_templateObject());
var defaultVictoryAspectRatio = 650 / 350;

var ChartContainer = function ChartContainer(_ref) {
  var title = _ref.title,
      error = _ref.error,
      loading = _ref.loading,
      subtitle = _ref.subtitle,
      children = _ref.children,
      className = _ref.className,
      aspectRatio = _ref.aspectRatio;
  var figureWrapper = (0, _core.css)(_templateObject2());
  var wrapperStyle = (0, _core.css)(_templateObject3(), className);
  var fullHeight = (0, _core.css)(_templateObject4(), 100 / aspectRatio);
  var skeletonStyle = (0, _core.css)(_templateObject5(), aspectRatio, 900 / aspectRatio, _index.BrandColors.subdued.hex);
  var content = (0, _core.jsx)("div", {
    css: skeletonStyle
  }, (0, _core.jsx)(_Logo["default"], {
    type: "squareLogoAnimated"
  }));

  if (!loading) {
    content = (0, _core.jsx)("div", {
      css: wrapperStyle
    }, children);
  } else if (error) {
    content = (0, _core.jsx)("div", {
      css: [wrapperStyle, fullHeight, chartError]
    }, error);
  }

  return (0, _core.jsx)("figure", {
    css: figureWrapper
  }, (0, _core.jsx)(_ChartTitle["default"], {
    title: title,
    subtitle: subtitle
  }), content);
};

ChartContainer.propTypes = {
  title: _propTypes["default"].string,
  error: _propTypes["default"].string,
  loading: _propTypes["default"].bool,
  children: _propTypes["default"].node,
  subtitle: _propTypes["default"].string,
  className: _propTypes["default"].string,
  aspectRatio: _propTypes["default"].number
};
ChartContainer.defaultProps = {
  aspectRatio: defaultVictoryAspectRatio
};
var _default = ChartContainer;
exports["default"] = _default;