import React from "react";
import styled from "styled-components";
import Flex from "../../layout/Flex";
export const DEFAULT_BOX_SIZE = 40;
export const DEFAULT_ICON_SIZE = 16;
export const DEFAULT_BADGE_SIZE = 20;
function getClipRectangleSize(badgeSize) {
    return (3 / 4) * badgeSize;
}
const getTopRightSquareClippedPolygon = (boxSize, rectangleSize) => {
    // clipping path that hides top right square of size `${rectangleSize}px`
    const diff = boxSize - rectangleSize;
    return `polygon(0 0, 0 0, 0 0, ${diff}px 0, ${diff}px ${rectangleSize}px, 100% ${rectangleSize}px, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%)`;
};
const Container = styled(Flex).attrs((p) => ({
    heigth: p.size,
    width: p.size,
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
})) ``;
const IconBoxBackground = styled(Flex) `
  position: absolute;
  height: ${p => p.size}px;
  width: ${p => p.size}px;
  ${p => {
    return (p.hasBadge &&
        `clip-path: ${getTopRightSquareClippedPolygon(p.size, getClipRectangleSize(p.badgeSize))};`);
}};
  border-radius: ${p => p.theme.radii[2]}px;
`;
const BadgeContainer = styled.div `
  position: absolute;
  ${p => `
    top: -${p.badgeSize / 2 - 2}px;
    right: -${p.badgeSize / 2 - 2}px;`}
`;
export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor = "neutral.c40", badgeColor, badgeSize = DEFAULT_BADGE_SIZE, }) => {
    const hasBadge = !!Badge;
    return (React.createElement(Container, { size: size },
        React.createElement(IconBoxBackground, { size: size, badgeSize: badgeSize, hasBadge: hasBadge, border: "1px solid", borderColor: borderColor }),
        children,
        hasBadge && (React.createElement(BadgeContainer, { badgeSize: badgeSize },
            React.createElement(Badge, { size: badgeSize, color: badgeColor })))));
};
const BoxedIcon = ({ Icon, iconSize = DEFAULT_ICON_SIZE, iconColor, ...iconBoxProps }) => {
    return (React.createElement(IconBox, { ...iconBoxProps },
        React.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor })));
};
export default BoxedIcon;
//# sourceMappingURL=BoxedIcon.js.map