"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

var _react = _interopRequireWildcard(require("react"));

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

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

var _ramda = require("ramda");

var _ramdaExtension = require("ramda-extension");

var _Box = _interopRequireDefault(require("../Box"));

var _Flex = _interopRequireDefault(require("../Flex"));

var _ConsoleItem = _interopRequireDefault(require("./ConsoleItem"));

var _hooks = require("./hooks");

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2["default"])(["\n\t0% {\n\t\ttransform: translateY(200px) scaleY(2.5) scaleX(.2);\n\t\ttransform-origin: 50% 0%;\n\t\tfilter: blur(40px);\n\t\topacity: 0;\n\t}\n\t100% {\n\t\ttransform: translateY(0) scaleY(1) scaleX(1);\n\t\ttransform-origin: 50% 50%;\n\t\tfilter: blur(0);\n\t\topacity: 1;\n\t}\n}\n"]);

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

  return data;
}

var jumpInFromBottom = (0, _core.keyframes)(_templateObject());
var easing = 'cubic-bezier(.455, .030, .515, .955)';
/* eslint-disable max-len */

var _ref = /*#__PURE__*/_react["default"].createElement("polygon", {
  fill: "currentColor",
  points: "10 1.03916875e-13 11.4061556 1.42222591 5.70307778 7.06086213 0 1.42222591 1.40615556 1.03916875e-13 5.70307778 4.24811295"
});

var DropdownArrow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
    ref: ref,
    as: "svg",
    width: "13px",
    height: "9px",
    viewBox: "0 0 13 9",
    xmlns: "http://www.w3.org/2000/svg"
  }, props), _ref);
}));
DropdownArrow.displayName = 'DropdownArrow';

var defaultFormattingFunction = function defaultFormattingFunction(x) {
  if ((0, _ramdaExtension.isString)(x)) {
    return x;
  } // if (isNumeric(x)) {
  // 	return <FormattedNumber value={x} maximumFractionDigits={1} />;
  // }


  if ((0, _ramdaExtension.isNumeric)(x)) {
    return Math.round(x * 1000) / 1000;
  }

  if ((0, _ramdaExtension.isBoolean)(x)) {
    return x ? 'True' : 'False';
  }

  return '-';
};
/* eslint-enable max-len */


exports.defaultFormattingFunction = defaultFormattingFunction;

var Console = function Console(_ref2) {
  var title = _ref2.title,
      _ref2$formatValue = _ref2.formatValue,
      formatValue = _ref2$formatValue === void 0 ? defaultFormattingFunction : _ref2$formatValue,
      initiallyOpened = _ref2.initiallyOpened,
      rest = (0, _objectWithoutProperties2["default"])(_ref2, ["title", "formatValue", "initiallyOpened"]);

  var _useState = (0, _react.useState)(initiallyOpened),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      isOpened = _useState2[0],
      setIsOpened = _useState2[1];

  var log = (0, _hooks.useConsoleLog)();
  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
    sx: {
      position: 'fixed',
      right: '0',
      bottom: 0,
      zIndex: 99999,
      animationName: jumpInFromBottom,
      animationDuration: '.5s',
      animationTimingFunction: easing,
      animationFillMode: 'both',
      animationDelay: '.75s',
      backgroundColor: '#3B3B3B',
      color: 'background',
      maxHeight: '100vh',
      minWidth: ['auto', '400px'],
      width: ['100%', '33%']
    }
  }, rest), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
    sx: {
      py: 2,
      px: 3,
      alignItems: 'center',
      cursor: 'pointer'
    },
    onClick: function onClick() {
      return setIsOpened(!isOpened);
    }
  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    as: "span",
    fontFamily: "mono",
    my: 0,
    sx: {
      pointerEvents: 'none'
    }
  }, title), /*#__PURE__*/_react["default"].createElement(DropdownArrow, {
    sx: {
      marginLeft: 'auto',
      display: 'inline',
      transform: "rotate(".concat(isOpened ? '0' : '180', "deg)")
    }
  })), isOpened && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    sx: {
      borderTopColor: 'background',
      overflowY: 'auto',
      height: '300px',
      borderTopStyle: 'solid',
      borderTopWidth: '1px'
    }
  }, log && (0, _ramda.o)((0, _ramda.map)(function (_ref3) {
    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
        label = _ref4[0],
        value = _ref4[1];

    return /*#__PURE__*/_react["default"].createElement(_ConsoleItem["default"], {
      key: label,
      label: label,
      value: formatValue(value)
    });
  }), _ramda.toPairs)(log)));
};

process.env.NODE_ENV !== "production" ? Console.propTypes = {
  children: _propTypes["default"].node,
  formatValue: _propTypes["default"].func,
  initiallyOpened: _propTypes["default"].bool,
  title: _propTypes["default"].node
} : void 0;
var _default = Console;
exports["default"] = _default;