ontime/apps/client/src/common/utils/styleUtils.ts

import { RGBColour } from 'ontime-types';
import { colourToHex, cssOrHexToColour, isLightColour, mixColours } from 'ontime-utils';

type ColourCombination = {
  backgroundColor: string;
  color: string;
};

const defaultUiBackground: RGBColour = { red: 26, green: 26, blue: 26, alpha: 1 };
/**
 * @description Selects text colour to maintain accessible contrast
 * @param bgColour
 * @return {{backgroundColor, color: string}}
 */
export const getAccessibleColour = (bgColour?: string): ColourCombination => {
  if (!bgColour) return { backgroundColor: '#1a1a1a', color: '#fffffa' };

  const originalColour = cssOrHexToColour(bgColour);
  if (!originalColour) return { backgroundColor: '#1a1a1a', color: '#fffffa' };

  const backgroundColorMix = mixColours(defaultUiBackground, originalColour, 1 - originalColour.alpha);
  const textColor = isLightColour(backgroundColorMix) ? 'black' : '#fffffa';

  return { backgroundColor: colourToHex(backgroundColorMix), color: textColor };
};

/**
 * @description Creates a list of classnames from array of css module conditions
 * @param classNames - css modules objects
 */
export const cx = (classNames: any[]) => classNames.filter(Boolean).join(' ');

export const enDash = '–';

export const timerPlaceholder = '––:––:––';
export const timerPlaceholderMin = '––:––';

/**
 * Adds opacity to a given colour if possible
 */
export function alpha(colour: string, amount: number): string {
  const originalColour = cssOrHexToColour(colour);
  if (!originalColour) return colour;
  originalColour.alpha = amount;
  return colourToHex(originalColour);
}