import React from 'react';
import styled from 'styled-components';
import { Flexbox, OldIcon, Typography } from '../..';
var getBorderColor = function getBorderColor(_ref) {
  var variant = _ref.variant,
    theme = _ref.theme;
  switch (variant) {
    case 'error':
      return theme.color.functionRed;
    case 'warning':
      return theme.color.functionYellow;
    case 'success':
      return theme.color.functionGreen;
    case 'info':
    default:
      return theme.color.cta;
  }
};
var getIcon = function getIcon(variant) {
  switch (variant) {
    case 'error':
      return React.createElement(OldIcon.CrossCircle, {
        size: 5,
        fill: function fill(t) {
          return t.color.functionRed;
        }
      });
    case 'warning':
      return React.createElement(OldIcon.WarningTriangle, {
        size: 5,
        fill: function fill(t) {
          return t.color.functionYellow;
        }
      });
    case 'success':
      return React.createElement(OldIcon.CheckMarkCircle, {
        size: 5,
        fill: function fill(t) {
          return t.color.functionGreen;
        }
      });
    case 'info':
    default:
      return React.createElement(OldIcon.InfoCircle, {
        size: 5,
        fill: function fill(t) {
          return t.color.cta;
        }
      });
  }
};
var StyledContainer = styled.div.withConfig({
  displayName: "FeedbackBanner__StyledContainer",
  componentId: "sc-1q6qf62-0"
})(["background-color:", ";border-left:", "px solid ", ";padding:", ";box-sizing:border-box;border-radius:", ";"], function (_ref2) {
  var theme = _ref2.theme,
    scope = _ref2.scope;
  return theme.color[scope === 'module' ? 'feedbackModuleBackground' : 'feedbackPageBackground'];
}, function (p) {
  return p.theme.spacing.unit(1);
}, getBorderColor, function (p) {
  return "".concat(p.theme.spacing.unit(1), "px ").concat(p.theme.spacing.unit(3), "px");
}, function (p) {
  return p.theme.borderRadius4;
});
var TextFlexbox = styled(Flexbox).withConfig({
  displayName: "FeedbackBanner__TextFlexbox",
  componentId: "sc-1q6qf62-1"
})(["width:100%;"]);
export var FeedbackBanner = function FeedbackBanner(_ref3) {
  var _ref3$variant = _ref3.variant,
    variant = _ref3$variant === void 0 ? 'info' : _ref3$variant,
    _ref3$scope = _ref3.scope,
    scope = _ref3$scope === void 0 ? 'module' : _ref3$scope,
    title = _ref3.title,
    _ref3$withIcon = _ref3.withIcon,
    withIcon = _ref3$withIcon === void 0 ? true : _ref3$withIcon,
    children = _ref3.children,
    className = _ref3.className;
  return React.createElement(StyledContainer, {
    className: className,
    variant: variant,
    scope: scope
  }, React.createElement(Flexbox, {
    container: true,
    direction: "row",
    alignItems: "center",
    gap: 3
  }, withIcon && React.createElement(React.Fragment, null, getIcon(variant)), React.createElement(TextFlexbox, {
    container: true,
    item: true,
    direction: "column"
  }, title && React.createElement(Typography, {
    type: "secondary",
    weight: "bold"
  }, title), React.createElement(Typography, {
    type: "secondary"
  }, children))));
};