import React from "react";
import type {VQCharacterDefinition, VQMouthResolver} from "../types";
import {VQCharacterAvatar} from "./VQCharacterAvatar";

export type VQCharacterStageProps<CharacterId extends string = string> =
  Readonly<{
    characters: Readonly<Record<CharacterId, VQCharacterDefinition>>;
    visibleCharacters: readonly CharacterId[];
    focusedCharacter?: CharacterId;
    speakingCharacter?: CharacterId;
    speakingSpeechId?: string;
    speakingLocalFrame: number;
    frame: number;
    fps: number;
    resolveMouth?: VQMouthResolver<CharacterId>;
    fontFamily?: string;
    stageStyle?: React.CSSProperties;
    avatarImageFilter?: string;
  }>;

export const VQCharacterStage = <CharacterId extends string,>({
  characters,
  visibleCharacters,
  focusedCharacter,
  speakingCharacter,
  speakingSpeechId,
  speakingLocalFrame,
  frame,
  fps,
  resolveMouth,
  fontFamily,
  stageStyle,
  avatarImageFilter,
}: VQCharacterStageProps<CharacterId>) => {
  const hasMultipleCharacters = visibleCharacters.length > 1;

  return (
    <div
      style={{
        flex: 1,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: hasMultipleCharacters ? 130 : 0,
        width: "100%",
        paddingBottom: 0,
        ...stageStyle,
      }}
    >
      {visibleCharacters.map((characterId) => (
        <VQCharacterAvatar
          key={characterId}
          characterId={characterId}
          character={characters[characterId]}
          focused={focusedCharacter === characterId}
          hasMultipleCharacters={hasMultipleCharacters}
          frame={frame}
          fps={fps}
          isSpeaking={speakingCharacter === characterId}
          speakingSpeechId={speakingSpeechId}
          speakingLocalFrame={speakingLocalFrame}
          resolveMouth={resolveMouth}
          fontFamily={fontFamily}
          imageFilter={avatarImageFilter}
        />
      ))}
    </div>
  );
};
