import ac1 from "src/assets/ac1.png";
import ac2 from "src/assets/ac2.png";
import ac3 from "src/assets/ac3.png";
import ac4 from "src/assets/ac4.png";
import valve from "src/assets/valve.png";
import { OnAvatarInput } from "src/site/Site";
import AvatarDrawing from "src/AvatarDrawing";
import { Col, Row } from "reactstrap";
import AvatarTitle from "src/AvatarTitle";

import scss from "src/site/AvatarItem.module.scss";

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 && (
          <>
            {" "}
            <img alt="" src={valve} className={scss.avatarConfigure} />
          </>
        )}
        {acs[avatarConfigure] && (
          <>
            {" "}
            <img
              alt=""
              src={acs[avatarConfigure]}
              className={scss.avatarConfigure}
            />
          </>
        )}
        {isSiteHand && (
          <>
            {" "}
            <img alt="" src={acs[1]} className={scss.avatarConfigure} />
          </>
        )}
      </Col>
    </Row>
  );
}
