import { computed, Ref } from 'vue';

/**
 * Provides an array of classes -- with the presumption of _tailwind_ classes
 * being in the population -- which are prefixed with the child component's name.
 *
 * For instance, if component `PTable` has a slot/child called _heading_ and
 * a consumer of this component uses it as:
 *
 * ```html
 * <p-table class="heading-text-blue-500" />
 * ```
 *
 * then the following use of tokenizeChild will produce an array of: `[ text-blue-500 ]`
 *
 * ```ts
 * const tokens = tokenizeClass(ctx)
 * const headingStyle = tokenizeChild(tokens, 'heading')
 * ```
 */
export const tokenizeChild = (tokens: Ref<string[]>, child: string) => {
  const re = new RegExp(`^${child}-`);
  return computed(() => tokens.value.filter(t => t.startsWith(child + '-')).map(t => t.replace(re, '')));
};