import { computed, Ref } from 'vue';
import { ifMissing } from './ifMissing';

export const styleColor = (
  tokens: Ref<string[]>,
  /** if the component has a "color" property it can be passed here; otherwise pass NULL */
  propsColor: string | null,
  /** the default value to use if no color info available [color, brightness] */
  defaultValues: [string, string],
) =>
  computed(() => {
    const findBrightness = /(\S+?)-([0-9]{3})/;
    const [color, brightness] = propsColor
      ? findBrightness.test(propsColor)
        ? (findBrightness.exec(propsColor) || []).slice(1, 3)
        : [propsColor || defaultValues[0], defaultValues[1]]
      : defaultValues;

    return ifMissing(tokens)(/text-\S+-[0-9]/, `text-${color}-${brightness}`);
  });