import { useMemo } from 'react';
import { mobileAvatarPalette } from '@hero-design/colors';

// Only use maasstrichtBlue colors for avatar stack
const DEFAULT_COLORS = Object.entries(mobileAvatarPalette)
  .filter(([key]) => key.startsWith('maasstrichtBlue'))
  .map(([, value]) => value);

const shuffleArray = <T>(array: Array<T>): Array<T> =>
  array
    .map((value) => ({ value, sort: Math.random() }))
    .sort((a, b) => a.sort - b.sort)
    .map(({ value }) => value);

/**
 * Hook that returns a memoized and shuffled array of visualisation colors for Avatar.
 */
export const useAvatarColors = () => {
  const shuffledColors = useMemo(() => shuffleArray(DEFAULT_COLORS), []);
  return shuffledColors;
};