import scss from "@/app/[language]/site/components/AvatarItem.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, Row } from "reactstrap";

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

export default function AvatarItem({
  avatarID,
  avatarName,
  avatarConfigure,
  isSiteHand,
  isMe,
  isValve,
  isAudioInput,
  onAvatarInput,
}: {
  avatarID: string;
  avatarName: string;
  avatarConfigure: number;
  isSiteHand: boolean;
  isMe: boolean;
  isValve: boolean;
  isAudioInput: boolean;
  onAvatarInput: OnAvatarInput;
}) {
  return (
    <Row
      className={`g-0 ${isMe ? "target" : ""}`}
      onContextMenu={(e) => {
        e.preventDefault();
        onAvatarInput(e, avatarID);
      }}
    >
      <Col className="m-1" xs="auto">
        <AvatarDrawing avatarID={avatarID} />
      </Col>
      <Col className="m-1" xs="auto">
        {avatarID && <AvatarTitle avatarID={avatarID} />}
        <span className={isAudioInput ? scss.audioInput : undefined}>
          {avatarName}
        </span>
        <br />
        {isValve && (
          <>
            {" "}
            <Image alt="" src={valve} height={24} />
          </>
        )}
        {acs[avatarConfigure] && (
          <>
            {" "}
            <Image
              alt=""
              src={acs[avatarConfigure]}
              className={scss.avatarConfigure}
            />
          </>
        )}
        {isSiteHand && (
          <>
            {" "}
            <Image alt="" src={acs[1]} className={scss.avatarConfigure} />
          </>
        )}
      </Col>
    </Row>
  );
}