import { TokenState } from '@specifyapp/specify-design-token-format';
import { DEFAULT_MODE } from '../../../builtInParsers/utils/constants.js';
import {
  RawTokenData,
  renderTemplate,
  sanitizeData,
  dataOfToken as dataOfToken_,
} from '../../../builtInParsers/utils/template.js';

export const INVALID_CHARS = /[\/\| \\~,@#$%^&*(){}|[\]?<>"'+=!]/g;

export const DEFAULT_TOKEN_NOT_IN_COLLECTION_TEMPLATE =
  '--{{#if groups}}{{groups}}-{{/if}}{{token}}{{#if mode}}-{{mode}}{{/if}}';
export const DEFAULT_TOKEN_TEMPLATE =
  '--{{#if groupsAfterCollection}}{{groupsAfterCollection}}-{{/if}}{{token}}';
export const DEFAULT_SELECTOR_TEMPLATE = ':root[data-{{collection}}="{{mode}}"]';

export function renderVariable(template: string, data: RawTokenData) {
  data.mode = data.mode === DEFAULT_MODE ? undefined : data.mode;
  return renderTemplate(template, sanitizeData(data, INVALID_CHARS, '-'));
}

export function renderSelector(template: string, data: RawTokenData) {
  return renderTemplate(template, sanitizeData(data, INVALID_CHARS, '-'));
}

export function dataOfToken(tokenState: TokenState, mode: string | undefined) {
  const data = dataOfToken_(tokenState, mode);

  const groups =
    data.collection && data.groups[0] === data.collection ? data.groups.slice(1) : data.groups;

  data.groups = groups;
  data.path = groups;
  data.groupList = groups;

  return data;
}