import React from 'react';
import styled, { css } from 'styled-components';
import { BORDER_SIZE } from './consts';
import { isFunction } from '../../../common/utils';
var getColor = function getColor(props) {
  var barColor = props.barColor,
    theme = props.theme;
  if (isFunction(barColor)) {
    return barColor(theme);
  }
  return 'transparent';
};
var barStyles = css(["position:relative;border:0;&::before{content:'';display:block;width:100%;height:", "px;background:", ";position:absolute;top:0;left:0;border-top-left-radius:", ";border-top-right-radius:", ";}"], function (p) {
  return p.theme.spacing.unit(2);
}, function (p) {
  return getColor(p);
}, function (p) {
  return p.theme.borderRadius8;
}, function (p) {
  return p.theme.borderRadius8;
});
var Card = styled.div.withConfig({
  displayName: "Bubble__Card",
  componentId: "sc-1cvddga-0"
})(["width:350px;min-height:", "px;padding:", "px;background:", ";border:", "px solid ", ";position:fixed;z-index:", ";display:flex;box-sizing:border-box;border-radius:", ";", " ", "{", "}"], function (p) {
  return p.theme.spacing.unit(35);
}, function (p) {
  return p.theme.spacing.unit(5);
}, function (p) {
  return p.theme.color.bubbleBackground;
}, BORDER_SIZE, function (p) {
  return p.theme.color.bubbleBorder;
}, function (p) {
  return p.theme.zIndex.modal + 1;
}, function (p) {
  return p.theme.borderRadius8;
}, function (p) {
  return p.barColor ? barStyles : "";
}, function (_ref) {
  var theme = _ref.theme;
  return theme.media.lessThan(theme.breakpoints.sm);
}, function (p) {
  if (p.feedbackWidgetMode) {
    return "\n        // !important to override popper inline styles\n        width: 94.5% !important;\n        transform: none !important;\n        inset: auto auto 0px 0px !important;\n        position: fixed !important;\n        margin: 0 ".concat(p.theme.spacing.unit(3), "px ").concat(p.theme.spacing.unit(3), "px\n        ").concat(p.theme.spacing.unit(3), "px !important;\n        border: 1px ").concat(p.theme.colorTokens.neutral.border_medium, " solid !important;\n        border-radius: ").concat(p.theme.borderRadius8, " !important; \n        ");
  }
  if (p.bottomSheet) {
    return "\n          // !important to override popper inline styles\n          width: 100% !important;\n          transform: none !important;\n          inset: auto auto 0px 0px !important;\n          position: fixed !important;\n          border-radius: \n          ".concat(p.barColor ? p.theme.borderRadius8 : p.theme.borderRadius20, " \n          ").concat(p.barColor ? p.theme.borderRadius8 : p.theme.borderRadius20, " \n          0 0 !important; \n          ");
  }
  return '';
});
export var Bubble = React.forwardRef(function (_ref2, ref) {
  var children = _ref2.children,
    className = _ref2.className,
    style = _ref2.style,
    barColor = _ref2.barColor,
    bottomSheet = _ref2.bottomSheet,
    feedbackWidgetMode = _ref2.feedbackWidgetMode;
  return React.createElement(Card, {
    className: className,
    style: style,
    ref: ref,
    barColor: barColor,
    bottomSheet: bottomSheet,
    feedbackWidgetMode: feedbackWidgetMode
  }, children);
});