import React from "react";
import type {VQMouthShape} from "../types";
import {VQLipSyncedStandeeImage} from "./VQLipSyncedStandeeImage";

export type VQStageCornerStandeeMode = "stage" | "corner";

export type VQStageCornerStandeeLayout = Readonly<{
  frameWidth: number | string;
  frameHeight: number | string;
  right: number | string;
  bottom: number | string;
  imageWidth: number | string;
  imageMaxHeight: number | string;
  imageHeight?: number | string;
  alignItems?: React.CSSProperties["alignItems"];
  overflow?: React.CSSProperties["overflow"];
  filter?: string;
}>;

export type VQStageCornerStandeeLayouts = Readonly<
  Record<VQStageCornerStandeeMode, VQStageCornerStandeeLayout>
>;

export const vqDefaultStageCornerStandeeLayouts = {
  stage: {
    frameWidth: 610,
    frameHeight: 760,
    right: 315,
    bottom: -118,
    imageWidth: "100%",
    imageHeight: "100%",
    imageMaxHeight: "100%",
    alignItems: "flex-end",
    overflow: "visible",
    filter: "drop-shadow(0 18px 40px rgba(31, 42, 68, 0.22))",
  },
  corner: {
    frameWidth: 420,
    frameHeight: 360,
    right: 18,
    bottom: 240,
    imageWidth: 470,
    imageHeight: 705,
    imageMaxHeight: 705,
    alignItems: "flex-start",
    overflow: "visible",
    filter: "drop-shadow(0 12px 24px rgba(0, 0, 0, 0.32))",
  },
} as const satisfies VQStageCornerStandeeLayouts;

export type VQStageCornerStandeeProps = Readonly<{
  mode: VQStageCornerStandeeMode;
  imagePath: string;
  mouthImageDir: string;
  mouth: VQMouthShape;
  translateY?: number;
  layouts?: VQStageCornerStandeeLayouts;
  zIndex?: number;
}>;

export const VQStageCornerStandee: React.FC<VQStageCornerStandeeProps> = ({
  mode,
  imagePath,
  mouthImageDir,
  mouth,
  translateY = 0,
  layouts = vqDefaultStageCornerStandeeLayouts,
  zIndex = 3,
}) => {
  const layout = layouts[mode];

  return (
    <div
      style={{
        position: "absolute",
        right: layout.right,
        bottom: layout.bottom,
        width: layout.frameWidth,
        height: layout.frameHeight,
        display: "flex",
        justifyContent: "center",
        alignItems: layout.alignItems ?? "flex-end",
        overflow: layout.overflow ?? "visible",
        transform: `translateY(${translateY}px)`,
        zIndex,
      }}
    >
      <VQLipSyncedStandeeImage
        imagePath={imagePath}
        mouthImageDir={mouthImageDir}
        mouth={mouth}
        width={layout.imageWidth}
        height={layout.imageHeight}
        maxHeight={layout.imageMaxHeight}
        filter={layout.filter}
      />
    </div>
  );
};
