import React from "react";
import {Img, staticFile} from "remotion";
import type {JapaneseMouthShape} from "./types";

type LipSyncedStandeeImageProps = Readonly<{
  imagePath: string;
  mouthImageDir: string;
  mouth: JapaneseMouthShape;
  width: number | string;
  maxHeight: number | string;
  height?: number | string;
  transform?: string;
  filter?: string;
}>;

export const defaultMouthImageDir = (avatarKind: string) =>
  `image/${avatarKind}-rhubarb-mouths`;

export const LipSyncedStandeeImage: React.FC<LipSyncedStandeeImageProps> = ({
  imagePath,
  mouthImageDir,
  mouth,
  width,
  maxHeight,
  height,
  transform,
  filter,
}) => {
  return (
    <div
      style={{
        position: "relative",
        zIndex: 1,
        width,
        height,
        maxHeight,
        lineHeight: 0,
        transform,
      }}
    >
      <Img
        src={staticFile(imagePath)}
        style={{
          width: "100%",
          height: height ? "100%" : undefined,
          maxHeight,
          objectFit: "contain",
          filter,
        }}
      />
      <Img
        src={staticFile(`${mouthImageDir}/${mouth}.png`)}
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "contain",
          pointerEvents: "none",
        }}
      />
    </div>
  );
};