import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { forwardRef, memo, useState } from 'react';
import PropTypes from 'prop-types';
import { keyframes } from '@emotion/core';
import { map, o, toPairs } from 'ramda';
import { isBoolean, isNumeric, isString } from 'ramda-extension';
import Box from '../Box';
import Flex from '../Flex';
import ConsoleItem from './ConsoleItem';
import { useConsoleLog } from './hooks';
const jumpInFromBottom = keyframes`
	0% {
		transform: translateY(200px) scaleY(2.5) scaleX(.2);
		transform-origin: 50% 0%;
		filter: blur(40px);
		opacity: 0;
	}
	100% {
		transform: translateY(0) scaleY(1) scaleX(1);
		transform-origin: 50% 50%;
		filter: blur(0);
		opacity: 1;
	}
}
`;
const easing = 'cubic-bezier(.455, .030, .515, .955)';
/* eslint-disable max-len */

var _ref = /*#__PURE__*/React.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"
});

const DropdownArrow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
  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';
export const defaultFormattingFunction = x => {
  if (isString(x)) {
    return x;
  } // if (isNumeric(x)) {
  // 	return <FormattedNumber value={x} maximumFractionDigits={1} />;
  // }


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

  if (isBoolean(x)) {
    return x ? 'True' : 'False';
  }

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

const Console = (_ref2) => {
  let {
    title,
    formatValue = defaultFormattingFunction,
    initiallyOpened
  } = _ref2,
      rest = _objectWithoutProperties(_ref2, ["title", "formatValue", "initiallyOpened"]);

  const [isOpened, setIsOpened] = useState(initiallyOpened);
  const log = useConsoleLog();
  return /*#__PURE__*/React.createElement(Box, _extends({
    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.createElement(Flex, {
    sx: {
      py: 2,
      px: 3,
      alignItems: 'center',
      cursor: 'pointer'
    },
    onClick: () => setIsOpened(!isOpened)
  }, /*#__PURE__*/React.createElement(Box, {
    as: "span",
    fontFamily: "mono",
    my: 0,
    sx: {
      pointerEvents: 'none'
    }
  }, title), /*#__PURE__*/React.createElement(DropdownArrow, {
    sx: {
      marginLeft: 'auto',
      display: 'inline',
      transform: `rotate(${isOpened ? '0' : '180'}deg)`
    }
  })), isOpened && /*#__PURE__*/React.createElement(Box, {
    sx: {
      borderTopColor: 'background',
      overflowY: 'auto',
      height: '300px',
      borderTopStyle: 'solid',
      borderTopWidth: '1px'
    }
  }, log && o(map(([label, value]) => /*#__PURE__*/React.createElement(ConsoleItem, {
    key: label,
    label: label,
    value: formatValue(value)
  })), toPairs)(log)));
};

process.env.NODE_ENV !== "production" ? Console.propTypes = {
  children: PropTypes.node,
  formatValue: PropTypes.func,
  initiallyOpened: PropTypes.bool,
  title: PropTypes.node
} : void 0;
export default Console;