import scss from "@/app/[language]/site/components/AvatarView.module.scss";
import { OnAvatarInput } from "@/app/[language]/site/type";
import ac1 from "@/assets/ac1.png";
import ac2 from "@/assets/ac2.png";
import ac3 from "@/assets/ac3.png";
import ac4 from "@/assets/ac4.png";
import valve from "@/assets/valve.png";
import AvatarDrawing from "@/components/AvatarDrawing";
import AvatarTitle from "@/components/AvatarTitle";
import Image from "next/image";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";

const acs = ["", ac1, ac2, ac3, ac4];

export default function AvatarItem({
  avatarID,
  avatarName,
  avatarConfigure,
  isSiteHand,
  isValve,
  isAudioInput,
  onAvatarInput,
}: {
  avatarID: string;
  avatarName: string;
  avatarConfigure: number;
  isSiteHand: boolean;
  isValve: boolean;
  isAudioInput: boolean;
  onAvatarInput: OnAvatarInput;
}) {
  return (
    <Row
      className="flex-nowrap"
      onContextMenu={(e) => {
        e.preventDefault();
        onAvatarInput(e, avatarID);
      }}
    >
      <Col xs="auto">
        <AvatarDrawing avatarID={avatarID} />
      </Col>
      <Col className="cc">
        <Stack gap={2}>
          <AvatarTitle
            avatarID={avatarID}
            avatarName={avatarName}
            className={`ellipsis ${isAudioInput ? scss.audioInput : ""}`}
          />
          <Stack gap={2} direction="horizontal">
            {isValve && <Image alt="" src={valve} height={24} />}
            <Image alt="" src={acs[avatarConfigure]} height={24} />
            {isSiteHand && (
              <Image
                alt=""
                src={acs[1]}
                className={scss.avatarConfigure}
                height={24}
              />
            )}
          </Stack>
        </Stack>
      </Col>
    </Row>
  );
}