import { slicedToArray as _slicedToArray } 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 {
    padding: theme.space[7],
    backgroundColor: theme.colors.grey[90],
    color: theme.colors.white,
    fontFamily: theme.fonts.monospace,
    fontSize: theme.fontSizes[1],
    lineHeight: theme.lineHeights["default"]
  };
};

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

function RawLogs(_ref) {
  var logItems = _ref.logItems,
      ariaLabel = _ref["aria-label"],
      _ref$timeFormat = _ref.timeFormat,
      timeFormat = _ref$timeFormat === void 0 ? "HH:mm:ss aa:" : _ref$timeFormat,
      className = _ref.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 (_ref2, idx) {
    var id = _ref2.id,
        timestamp = _ref2.timestamp,
        message = _ref2.message,
        sourceStream = _ref2.sourceStream;
    var key = idx;

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

    var timestampDate = timestamp ? new Date(timestamp) : null;

    var itemCss = function itemCss(theme) {
      return {
        margin: 0,
        color: sourceStream === "STDERR" ? theme.colors.red[40] : theme.colors.white
      };
    };

    return jsx("li", {
      key: key,
      css: itemCss
    }, timestampDate && jsx(Fragment, null, jsx("time", {
      dateTime: timestampDate.toString()
    }, format(timestampDate, timeFormat)), "\xA0"), 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
