import React from 'react';
import styled, { css } from 'styled-components';
import { TRIANGLE_INDENTATION, TRIANGLE_SIZE } from './consts';
import { BORDER_SIZE } from '../Bubble/consts';
var arrowUp = css(["&::before{border-left:", "px solid transparent;border-right:", "px solid transparent;border-bottom:", "px solid ", ";}&::after{left:", "px;top:", "px;border-left:", "px solid transparent;border-right:", "px solid transparent;border-bottom:", "px solid ", ";}"], TRIANGLE_SIZE, TRIANGLE_SIZE, TRIANGLE_SIZE, function (p) {
  return p.noBorder ? 'transparent' : p.theme.color.bubbleBorder;
}, BORDER_SIZE * 2, BORDER_SIZE * 2, TRIANGLE_SIZE - BORDER_SIZE * 2, TRIANGLE_SIZE - BORDER_SIZE * 2, TRIANGLE_SIZE - BORDER_SIZE * 2, function (p) {
  return p.theme.color.bubbleBackground;
});
var arrowRight = css(["&::before{border-top:", "px solid transparent;border-bottom:", "px solid transparent;border-left:", "px solid ", ";}&::after{left:0;top:", "px;border-top:", "px solid transparent;border-bottom:", "px solid transparent;border-left:", "px solid ", ";}"], TRIANGLE_SIZE, TRIANGLE_SIZE, TRIANGLE_SIZE, function (p) {
  return p.noBorder ? 'transparent' : p.theme.color.bubbleBorder;
}, BORDER_SIZE * 2, TRIANGLE_SIZE - BORDER_SIZE * 2, TRIANGLE_SIZE - BORDER_SIZE * 2, TRIANGLE_SIZE - BORDER_SIZE * 2, function (p) {
  return p.theme.color.bubbleBackground;
});
var arrowDown = css(["&::before{border-left:", "px solid transparent;border-right:", "px solid transparent;border-top:", "px solid ", ";}&::after{left:", "px;top:0;border-left:", "px solid transparent;border-right:", "px solid transparent;border-top:", "px solid ", ";}"], TRIANGLE_SIZE, TRIANGLE_SIZE, TRIANGLE_SIZE, function (p) {
  return p.noBorder ? 'transparent' : p.theme.color.bubbleBorder;
}, BORDER_SIZE * 2, TRIANGLE_SIZE - BORDER_SIZE * 2, TRIANGLE_SIZE - BORDER_SIZE * 2, TRIANGLE_SIZE - BORDER_SIZE * 2, function (p) {
  return p.theme.color.bubbleBackground;
});
var arrowLeft = css(["&::before{border-top:", "px solid transparent;border-bottom:", "px solid transparent;border-right:", "px solid ", ";}&::after{left:", "px;top:", "px;border-top:", "px solid transparent;border-bottom:", "px solid transparent;border-right:", "px solid ", ";}"], TRIANGLE_SIZE, TRIANGLE_SIZE, TRIANGLE_SIZE, function (p) {
  return p.noBorder ? 'transparent' : p.theme.color.bubbleBorder;
}, BORDER_SIZE * 2, BORDER_SIZE * 2, TRIANGLE_SIZE - BORDER_SIZE * 2, TRIANGLE_SIZE - BORDER_SIZE * 2, TRIANGLE_SIZE - BORDER_SIZE * 2, function (p) {
  return p.theme.color.bubbleBackground;
});
var Arrow = styled.div.withConfig({
  displayName: "BubbleArrow__Arrow",
  componentId: "sc-6ix6wd-0"
})(["position:absolute;&::before,&::after{content:'';display:block;width:0;height:0;position:absolute;top:0;left:0;}", " ", " ", " ", ""], function (p) {
  return p.$bubblePlacement === 'left' ? arrowRight : '';
}, function (p) {
  return p.$bubblePlacement === 'top' ? arrowDown : '';
}, function (p) {
  return p.$bubblePlacement === 'right' ? arrowLeft : '';
}, function (p) {
  return p.$bubblePlacement === 'bottom' ? arrowUp : '';
});
var getArrowPositionStyles = function getArrowPositionStyles(bubblePlacement) {
  if (bubblePlacement === 'top') {
    return {
      left: TRIANGLE_INDENTATION,
      top: '100%'
    };
  }
  if (bubblePlacement === 'right') {
    return {
      left: 0 - TRIANGLE_SIZE,
      top: TRIANGLE_INDENTATION
    };
  }
  if (bubblePlacement === 'left') {
    return {
      left: '100%',
      top: TRIANGLE_INDENTATION
    };
  }
  return {
    left: TRIANGLE_INDENTATION,
    top: 0 - TRIANGLE_SIZE
  };
};
export var BubbleArrow = React.forwardRef(function (_ref, ref) {
  var bubblePlacement = _ref.bubblePlacement,
    noBorder = _ref.noBorder;
  var arrowPositionStyles = getArrowPositionStyles(bubblePlacement);
  return React.createElement(Arrow, {
    $bubblePlacement: bubblePlacement,
    style: arrowPositionStyles,
    ref: ref,
    noBorder: noBorder
  });
});