type MediaPreviewTone = 'audio' | 'video';

type MediaPreviewMarker = {
  tone: MediaPreviewTone;
  variant: number;
};

const MEDIA_PREVIEW_VARIANT_COUNT = 6;

function hashMediaPreviewSeed(seed: string) {
  let hash = 0;
  for (let index = 0; index < seed.length; index += 1) {
    hash = (hash * 31 + seed.charCodeAt(index)) >>> 0;
  }
  return hash;
}

export function getCanvasMediaPreviewMarker({
  mediaType,
  assetKind,
  title,
  src,
}: {
  mediaType?: string | null;
  assetKind?: string | null;
  title?: string | null;
  src?: string | null;
}): MediaPreviewMarker | null {
  if (mediaType !== 'audio' && mediaType !== 'video') {
    return null;
  }
  const seed = `${assetKind ?? ''}|${title ?? ''}|${src ?? ''}`;
  return {
    tone: mediaType,
    variant: hashMediaPreviewSeed(seed) % MEDIA_PREVIEW_VARIANT_COUNT,
  };
}

export function getCanvasMediaPreviewClassName(
  marker: MediaPreviewMarker | null,
) {
  if (!marker) {
    return '';
  }
  return [
    'image-canvas-editor__media-preview',
    `image-canvas-editor__media-preview--${marker.tone}`,
    `image-canvas-editor__media-preview--variant-${marker.variant}`,
  ].join(' ');
}