import { colors } from '../../../../src/style/variables';

import { GumModify } from '../models';
import { hexToRgb } from './hexToRgb';
import { rgbToHsl } from './rgbToHsl';

/**
 * Returns color value based on variables.ts config with modified lightness and opacity
 * @param key variables.ts config color key
 * @param light Lightness value
 * @param a Alpha (opacity) value
 */
export const colorModify: GumModify = (key, light, a) => {
  const [r, g, b] = hexToRgb(colors[key]);
  const [h, s, l] = rgbToHsl(r, g, b);

  const newL = l + light >= 100 ? 100 : l + light;

  if (a) {
    return `hsla(${h}, ${s}%, ${newL}%, ${a})`;
  }

  return `hsl(${h}, ${s}%, ${newL}%)`;
};