// based on https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo

// this object holds the TW variable name we will have in our theme. The value are a pair for [CSSVariable, value]
// we use only the RBG vaules without the actual "rgb(0, 0, 0)" decalration for Tailwind to use in it's functions.
const customColors = {
  'demo': ['var(--demo)', '64, 180, 229'],
  'another-tw-name': ['var(--another-tw-name)', '102, 195, 234'],
};

/**
 * This function is the way to create all the opacity values for CSS variables:
 * https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo
 */
function genrateTailwindCallbacks(colors) {
  return Object.keys(colors).reduce((output, colorToken) => {
    const colorPair = colors[colorToken];
    const [, value] = colorPair;
    return {
      ...output,
      [colorToken]: ({ opacityVariable, opacityValue }) => {
        if (opacityValue !== undefined) {
          return `rgba(${value}, ${opacityValue})`;
        }
        if (opacityVariable !== undefined) {
          return `rgba(${value}, var(${opacityVariable}, 1))`;
        }
        return `rgb(${value})`;
      },
    };
  }, {});
}


// function to generate a replacemnet to css custom variables for
// actual RBG color value for tailwind-theme-viewer: 

function getThemeReplacementColorMap(colors) {
  return Object.keys(colors).reduce((output, colorToken) => {
    const colorPair = colors[colorToken];
    const [name, value] = colorPair;
    return {
      ...output,
      [name]: `rbg(${value})`,
    };
  }, {});
}
/**
 *
 * @param {*} colors
 * for tailwind-theme-viewer
 */
function genrateThemeConfigViewerColors(colors) {
  return Object.keys(colors).reduce((output, colorToken) => {
    const [name, value] = colors[colorToken];
    name;
    return {
      ...output,
      [colorToken]: `rgb(${value})`,
    };
  }, {});
}