<script setup lang="ts">
import MENU_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
import BIRTHDAY_IMAGE from "/assets/images/settings/top-screen/user/birthday.webp";
import COLOR_IMAGE from "/assets/images/settings/top-screen/user/color.webp";
import MESSAGE_IMAGE from "/assets/images/settings/top-screen/user/message.webp";
import USER_NAME_IMAGE from "/assets/images/settings/top-screen/user/user_name.webp";

const props = defineProps<{
  x: number;
  y: number;
  isOpen: boolean;
}>();

const [menuImage, birthdayImage, colorImage, messageImage, userNameImage] =
  useImages(
    MENU_IMAGE,
    BIRTHDAY_IMAGE,
    COLOR_IMAGE,
    MESSAGE_IMAGE,
    USER_NAME_IMAGE,
  );

useRender((ctx) => {
  ctx.translate(props.x, props.y);

  ctx.drawImage(menuImage!, 0, 0);

  if (props.isOpen) {
    ctx.drawImage(birthdayImage!, -48, -48);
    ctx.drawImage(userNameImage!, 0, -48);
    ctx.drawImage(messageImage!, 48, -48);
    ctx.drawImage(colorImage!, 0, -96);
  }
});

defineOptions({
  render: () => null,
});
</script>
