/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import { N40, N60, N80, P300, R400, T300, Y400 } from '@atlaskit/theme/colors';
const createSteppedRainbow = colors => {
  return `
    linear-gradient(
      to right,
      ${colors.map((color, i) => {
    const inc = 100 / colors.length;
    const pos = i + 1;
    if (i === 0) {
      return `${color} ${pos * inc}%,`;
    }
    if (i === colors.length - 1) {
      return `${color} ${(pos - 1) * inc}%`;
    }
    return `
            ${color} ${(pos - 1) * inc}%,
            ${color} ${pos * inc}%,
          `;
  }).join('\n')}
    )`;
};
const rainbow = createSteppedRainbow([P300, T300, Y400, R400]);
const disabledRainbow = createSteppedRainbow([N80, N60, N40, N60]);
const barStyles = css({
  position: 'absolute',
  left: 0,
  right: 0,
  top: "var(--ds-space-200, 16px)",
  margin: 'auto',
  width: '12px',
  height: '3px',
  borderRadius: "var(--ds-border-radius, 3px)"
});
const textColorIconWrapper = css({
  position: 'relative'
});
const getBackground = (selectedColor, disabled) => {
  if (selectedColor) {
    return selectedColor;
  }
  if (disabled) {
    return disabledRainbow;
  }
  return rainbow;
};
export const SteppedRainbowIconDecoration = ({
  selectedColor,
  disabled,
  icon
}) => {
  return jsx("div", {
    css: textColorIconWrapper
  }, icon, jsx("div", {
    "data-testid": "toolbar-icon-stepped-rainbow",
    style: {
      background: getBackground(selectedColor, disabled)
    },
    css: barStyles
  }));
};