"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Icon = _interopRequireDefault(require("./../Icon"));
var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
var _styles = require("@material-ui/core/styles");
var _Skeleton = _interopRequireDefault(require("@material-ui/lab/Skeleton"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
(function () {
  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
  enterModule && enterModule(module);
})();
(function () {
  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
  enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
  return a;
};
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
  return a;
};
var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    placeholder: {
      margin: "".concat(theme.spacing(10), " auto"),
      "& > *": {
        color: theme.palette.grey.icon
      }
    },
    placeholderError: {
      "& > *": {
        color: theme.palette.error.main
      }
    },
    placeholderImage: {
      fontSize: theme.spacing(14)
    },
    placeholderTitle: {
      marginTop: theme.spacing(1),
      fontSize: theme.typography.h1Size
    },
    placeholderSubtitle: {
      marginTop: theme.spacing(1),
      fontSize: theme.typography.h3Size
    },
    placeholderRow: {
      alignSelf: "flex-start",
      width: "100%",
      display: "flex",
      borderBottom: "1px solid ".concat(theme.palette.grey.borders),
      backgroundColor: "".concat(theme.palette.background.paper, "!important")
    },
    placeholderCell: {
      display: "inline-flex",
      padding: theme.spacing(2.7, 1.6),
      paddingRight: theme.spacing(4.6),
      flex: 1,
      alignItems: "center"
    },
    textSkeleton: {
      width: "100%",
      height: 6,
      animation: false
    },
    chipSkeleton: {
      width: 60,
      height: 25,
      animation: false,
      borderRadius: "15px"
    },
    radioSkeleton: {
      width: 17,
      height: 17,
      animation: false
    },
    root: {
      flexGrow: 1,
      display: "flex",
      flexDirection: "column"
    },
    animatePlaceholderImage: {
      animation: "$rotate 4s linear infinite",
      margin: "auto"
    },
    "@keyframes rotate": {
      to: {
        transform: "rotate(1turn)"
      }
    }
  };
});
var Placeholder = function Placeholder(_ref) {
  var icon = _ref.icon,
    title = _ref.title,
    subtitle = _ref.subtitle,
    _ref$cellList = _ref.cellList,
    cellList = _ref$cellList === void 0 ? [] : _ref$cellList,
    _ref$error = _ref.error,
    error = _ref$error === void 0 ? false : _ref$error,
    _ref$animateIcon = _ref.animateIcon,
    animateIcon = _ref$animateIcon === void 0 ? false : _ref$animateIcon;
  var classes = useStyles();
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: classes.root
  }, cellList.length ? /*#__PURE__*/_react.default.createElement("div", {
    className: classes.placeholderRow
  }, cellList.map(function (value, index) {
    switch (value) {
      case "chip":
        return /*#__PURE__*/_react.default.createElement("div", {
          key: "pc-".concat(index),
          className: classes.placeholderCell
        }, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
          className: classes.chipSkeleton
        }));
      case "radio":
        return /*#__PURE__*/_react.default.createElement("div", {
          key: "pc-".concat(index),
          className: classes.placeholderCell
        }, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
          variant: "circle",
          className: classes.radioSkeleton
        }));
      default:
        return /*#__PURE__*/_react.default.createElement("div", {
          key: "pc-".concat(index),
          className: classes.placeholderCell
        }, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
          className: classes.textSkeleton
        }));
    }
  })) : null, (icon || title || subtitle) && /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true,
    direction: "column",
    alignItems: "center",
    className: "".concat(classes.placeholder, " ").concat(error ? classes.placeholderError : "")
  }, icon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
    className: "".concat(classes.placeholderImage, " ").concat(animateIcon ? classes.animatePlaceholderImage : ""),
    id: icon
  }) : null, title ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
    className: classes.placeholderTitle
  }, title) : null, subtitle ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
    className: classes.placeholderSubtitle
  }, subtitle) : null)));
};
__signature__(Placeholder, "useStyles{classes}", function () {
  return [useStyles];
});
__signature__(Placeholder, "useStyles{classes}", function () {
  return [useStyles];
});
var _default = Placeholder;
var _default2 = _default;
var _default3 = exports.default = _default2;
;
(function () {
  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
  if (!reactHotLoader) {
    return;
  }
  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js");
  reactHotLoader.register(Placeholder, "Placeholder", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js");
  reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js");
})();
;
(function () {
  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
  leaveModule && leaveModule(module);
})();
;
(function () {
  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
  if (!reactHotLoader) {
    return;
  }
  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js");
  reactHotLoader.register(Placeholder, "Placeholder", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js");
  reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js");
})();
;
(function () {
  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
  leaveModule && leaveModule(module);
})();