import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { useRef, useState, useEffect, Fragment } from 'react';
import _pt from 'prop-types';
import format from '../../../node_modules/date-fns/esm/format/index.esm.js';

var baseCss = function baseCss(theme) {
  return _defineProperty({
    padding: theme.space[5],
    backgroundColor: theme.colors.grey[80],
    color: theme.colors.white,
    fontFamily: theme.fonts.monospace,
    fontSize: theme.fontSizes[1],
    lineHeight: theme.lineHeights["default"]
  }, theme.mediaQueries.desktop, {
    padding: theme.space[7]
  });
};

var listCss = function listCss(_theme) {
  return {
    listStyle: "none",
    margin: 0,
    padding: 0,
    height: "100%",
    overflowY: "auto"
  };
};

var itemCss = function itemCss(theme) {
  return [_defineProperty({
    margin: 0,
    lineHeight: 1.8,
    color: theme.colors.grey[30],
    time: {
      whiteSpace: "nowrap",
      marginRight: theme.space[3],
      color: theme.colors.grey[40],
      fontStyle: "italic"
    },
    p: {
      margin: 0,
      whiteSpace: "pre-wrap",
      marginLeft: theme.space[5],
      span: {
        fontWeight: "bold",
        "&.success": {
          color: theme.colors.green[40]
        },
        "&.info": {
          color: theme.colors.blue[40]
        },
        "&.warning": {
          color: theme.colors.orange[50]
        },
        "&.error": {
          color: theme.colors.red[10],
          background: theme.colors.red[90],
          padding: "".concat(theme.space[1], " ").concat(theme.space[2]),
          borderRadius: theme.radii[2],
          textTransform: "uppercase",
          "&:after, &:before": {
            content: "\"!\""
          }
        }
      }
    }
  }, theme.mediaQueries.desktop, {
    display: "flex",
    p: {
      marginLeft: 0
    }
  })];
};

function formatMessage(message) {
  if (!message) {
    return;
  }

  var formated = message.replace(/(^|\n)(success|info|warning|error) /gi, function (_, match1, match2) {
    return "".concat(match1, "<span class=\"").concat(match2.toLowerCase(), "\">").concat(match2, "</span> ");
  });
  return jsx("p", {
    dangerouslySetInnerHTML: {
      __html: formated
    }
  });
}

function RawLogs(_ref3) {
  var logItems = _ref3.logItems,
      ariaLabel = _ref3["aria-label"],
      _ref3$timeFormat = _ref3.timeFormat,
      timeFormat = _ref3$timeFormat === void 0 ? "HH:mm:ss aa:" : _ref3$timeFormat,
      className = _ref3.className;
  var listRef = useRef(null);

  var _React$useState = useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      autoScroll = _React$useState2[0],
      setAutoScroll = _React$useState2[1];

  useEffect(function () {
    if (!autoScroll || !listRef.current) {
      return;
    }

    if (listRef.current.scrollHeight > listRef.current.clientHeight) {
      listRef.current.scrollTop = listRef.current.scrollHeight;
    } else {
      listRef.current.lastChild.scrollIntoView();
    }
  });

  var handleScroll = function handleScroll(e) {
    var list = e.target;
    var isAtEnd = list.scrollHeight - list.scrollTop === list.clientHeight;

    if (isAtEnd) {
      setAutoScroll(true);
    } else if (autoScroll && !isAtEnd) {
      setAutoScroll(false);
    }
  };

  return jsx("div", {
    role: "log",
    css: baseCss,
    className: className
  }, jsx("ol", {
    tabIndex: 0,
    ref: listRef,
    "aria-label": ariaLabel,
    css: listCss,
    onScroll: handleScroll
  }, logItems.map(function (_ref4, idx) {
    var id = _ref4.id,
        timestamp = _ref4.timestamp,
        message = _ref4.message;
    var key = idx;

    if (id) {
      key = id;
    } else if (message && timestamp) {
      key = "".concat(message, "--").concat(timestamp);
    }

    var timestampDate = timestamp ? new Date(timestamp) : null;
    return jsx("li", {
      key: key,
      css: itemCss
    }, timestampDate && jsx(Fragment, null, jsx("time", {
      dateTime: timestampDate.toString()
    }, format(timestampDate, timeFormat))), formatMessage(message));
  })));
}
RawLogs.propTypes = {
  logItems: _pt.arrayOf(_pt.shape({
    id: _pt.oneOfType([_pt.string, _pt.oneOf([null])]),
    message: _pt.node,
    timestamp: _pt.oneOfType([_pt.number, _pt.string]),
    sourceStream: _pt.oneOfType([_pt.oneOf(["STDERR"]), _pt.oneOf(["STDOUT"]), _pt.oneOf([null])])
  })).isRequired,
  "aria-label": _pt.string.isRequired,
  timeFormat: _pt.string,
  className: _pt.string
};
RawLogs.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RawLogs",
  "props": {
    "timeFormat": {
      "defaultValue": {
        "value": "\"HH:mm:ss aa:\"",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "logItems": {
      "required": true,
      "tsType": {
        "name": "Array",
        "elements": [{
          "name": "signature",
          "type": "object",
          "raw": "{\n  id?: string | null\n  message?: React.ReactNode\n  timestamp?: number | string\n  sourceStream?: \"STDERR\" | \"STDOUT\" | null\n  [k: string]: unknown\n}",
          "signature": {
            "properties": [{
              "key": "id",
              "value": {
                "name": "union",
                "raw": "string | null",
                "elements": [{
                  "name": "string"
                }, {
                  "name": "null"
                }],
                "required": false
              }
            }, {
              "key": "message",
              "value": {
                "name": "ReactReactNode",
                "raw": "React.ReactNode",
                "required": false
              }
            }, {
              "key": "timestamp",
              "value": {
                "name": "union",
                "raw": "number | string",
                "elements": [{
                  "name": "number"
                }, {
                  "name": "string"
                }],
                "required": false
              }
            }, {
              "key": "sourceStream",
              "value": {
                "name": "union",
                "raw": "\"STDERR\" | \"STDOUT\" | null",
                "elements": [{
                  "name": "literal",
                  "value": "\"STDERR\""
                }, {
                  "name": "literal",
                  "value": "\"STDOUT\""
                }, {
                  "name": "null"
                }],
                "required": false
              }
            }, {
              "key": {
                "name": "string"
              },
              "value": {
                "name": "unknown",
                "required": true
              }
            }]
          }
        }],
        "raw": "RawLogItem[]"
      },
      "description": ""
    },
    "aria-label": {
      "required": true,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "className": {
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/RawLogs/RawLogs.tsx"] = {
    name: "RawLogs",
    docgenInfo: RawLogs.__docgenInfo,
    path: "src/components/RawLogs/RawLogs.tsx"
  };
}

export { RawLogs };
//# sourceMappingURL=RawLogs.esm.js.map
