import { jsx } from '@emotion/core';
import { StructuredLogLevel } from './types.esm.js';
import { FormattedMessage } from './FormattedMessage.esm.js';
import { Link } from '../Link/Link.esm.js';
import Text from '../Text/Text.esm.js';

/** @jsx jsx */
function FormattedLogMessage(_ref) {
  var level = _ref.level,
      message = _ref.message,
      docsUrl = _ref.docsUrl,
      location = _ref.location,
      filePath = _ref.filePath,
      errorUrl = _ref.errorUrl,
      className = _ref.className;
  return jsx("div", {
    css: getMessageCss(level),
    className: className
  }, jsx(FormattedMessage, {
    rawMessage: message || ""
  }), docsUrl && jsx(Text, null, "For more details see ", jsx(Link, {
    href: docsUrl
  }, docsUrl)), location && location.start && errorUrl && jsx(Text, null, "The error occured in", " ", jsx(Link, {
    href: errorUrl
  }, filePath, "@", location.start.line, ",", location.start.column)));
}

function getMessageCss(level) {
  return function (theme) {
    var spaceMixin = {
      margin: 0,
      "&:not(:last-child)": {
        marginBottom: theme.space[3]
      }
    };
    return {
      div: {
        // The first div > p is the title of the message.
        p: {
          "&:first-of-type": {
            color: getLogLevelColor(level)(theme),
            fontSize: theme.fontSizes[1],
            marginBottom: theme.space[3]
          }
        },
        // If we only have a single p in a single div, we don't want the margin.
        "&:only-child": {
          p: {
            "&:only-child": {
              marginBottom: 0
            }
          }
        }
      },
      whiteSpace: "pre-wrap",
      display: "block",
      ul: [spaceMixin, {
        marginBottom: theme.space[3],
        marginLeft: theme.space[5],
        color: theme.colors.grey[50],
        listStyle: "disc",
        fontSize: theme.fontSizes[0],
        li: {
          marginBottom: theme.space[2]
        }
      }],
      pre: [spaceMixin, {
        padding: "".concat(theme.space[5], " ").concat(theme.space[4]),
        fontSize: theme.fontSizes[1],
        lineHeight: theme.lineHeights.solid,
        color: theme.colors.grey[60],
        borderRadius: theme.radii[2],
        background: theme.colors.grey[5],
        overflowY: "auto",
        em: {
          color: getLogLevelColor(level)(theme),
          fontStyle: "normal",
          fontWeight: "bold"
        },
        span: {
          color: theme.colors.grey[60]
        }
      }],
      code: {
        lineHeight: theme.lineHeights["default"],
        fontSize: theme.fontSizes[1]
      },
      p: [spaceMixin, {
        color: theme.colors.grey[50],
        fontSize: theme.fontSizes[0],
        lineHeight: theme.lineHeights.loose,
        a: {
          textDecoration: "none"
        }
      }]
    };
  };
}

function getLogLevelColor(logLevel) {
  return function (theme) {
    switch (logLevel) {
      case StructuredLogLevel.Error:
        return theme.colors.red[70];

      case StructuredLogLevel.Warning:
        return theme.colors.yellow[90];

      default:
        return theme.colors.grey[80];
    }
  };
}

FormattedLogMessage.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "FormattedLogMessage",
  "props": {
    "className": {
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    }
  }
};

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

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