import React from 'react';
import styled from 'styled-components';
import { Box, Flexbox, Typography, Icon, VisuallyHidden } from '../..';
import PageWrapper from '../PageWrapper';
var bgFn = function bgFn(_ref) {
  var variant = _ref.variant,
    theme = _ref.theme;
  switch (variant) {
    case 'success':
      return theme.color.infoBarBackgroundSuccess;
    case 'error':
      return theme.color.infoBarBackgroundError;
    case 'warning':
      return theme.color.infoBarBackgroundWarning;
    case 'general':
      return theme.color.infoBarBackgroundInfo;
    default:
      return theme.color.infoBarBackgroundInfo;
  }
};
var textLinkFn = function textLinkFn(_ref2) {
  var variant = _ref2.variant,
    theme = _ref2.theme;
  switch (variant) {
    case 'success':
      return theme.color.text;
    case 'error':
      return theme.color.text;
    case 'warning':
      return theme.color.text;
    case 'general':
      return theme.color.link;
    default:
      return theme.color.link;
  }
};
var InfoBarPageWrapper = styled(PageWrapper).withConfig({
  displayName: "InfoBar__InfoBarPageWrapper",
  componentId: "sc-1xd3qwc-0"
})(["background:", ";color:", ";& span{color:inherit;}& a{font-weight:bold;color:", ";}button{display:block;padding:0;background:none;border-width:0;cursor:pointer;}"], bgFn, function (_ref3) {
  var theme = _ref3.theme;
  return theme.color.text;
}, textLinkFn);
var InfoBarIcon = function InfoBarIcon(_ref4) {
  var variant = _ref4.variant;
  switch (variant) {
    case 'success':
      return React.createElement(Icon.CheckCircleFill16, {
        color: function color(theme) {
          return theme.color.infoBarSuccess;
        }
      });
    case 'error':
      return React.createElement(Icon.ErrorFill16, {
        color: function color(theme) {
          return theme.color.infoBarError;
        }
      });
    case 'warning':
      return React.createElement(Icon.WarningFill16, {
        color: function color(theme) {
          return theme.color.infoBarWarning;
        }
      });
    case 'general':
      return React.createElement(Icon.InformationFill16, {
        color: function color(theme) {
          return theme.color.infoBarInfo;
        }
      });
    default:
      return React.createElement(Icon.InformationFill16, {
        color: function color(theme) {
          return theme.color.infoBarInfo;
        }
      });
  }
};
export var InfoBar = function InfoBar(_ref5) {
  var variant = _ref5.variant,
    onClose = _ref5.onClose,
    className = _ref5.className,
    children = _ref5.children,
    _ref5$closeButtonText = _ref5.closeButtonText,
    closeButtonText = _ref5$closeButtonText === void 0 ? 'Close' : _ref5$closeButtonText;
  return React.createElement(InfoBarPageWrapper, {
    className: className,
    variant: variant
  }, React.createElement(Box, {
    py: 1,
    px: 3,
    sm: {
      px: 0
    }
  }, React.createElement(Flexbox, {
    container: true,
    alignItems: "center"
  }, React.createElement(Flexbox, {
    item: true
  }, React.createElement(Box, {
    pr: 2
  }, React.createElement(InfoBarIcon, {
    variant: variant
  }))), React.createElement(Flexbox, {
    item: true,
    grow: 2
  }, React.createElement(Typography, {
    type: "secondary"
  }, children)), typeof onClose === 'function' ? React.createElement(Flexbox, {
    item: true
  }, React.createElement(Box, {
    pl: 2
  }, React.createElement("button", {
    type: "button",
    onClick: onClose
  }, React.createElement(Icon.Cross16, {
    color: function color(theme) {
      return theme.color.text;
    }
  }), React.createElement(VisuallyHidden, null, closeButtonText)))) : React.createElement(React.Fragment, null))));
};