<script setup lang="ts">
import BACKGROUND_IMAGE from "/assets/images/projects/bottom-screen/background.webp";
import VISIT_DISABLED_IMAGE from "/assets/images/projects/bottom-screen/visit-disabled.webp";

const store = useProjectsStore();

const [backgroundImage, visitDisabledImage] = useImages(
  BACKGROUND_IMAGE,
  VISIT_DISABLED_IMAGE,
);

useRender((ctx) => {
  ctx.drawImage(backgroundImage!, 0, 0);

  if (store.projects[store.currentProject]?.url === null) {
    ctx.drawImage(visitDisabledImage!, 144, 172);
  }
});

const QUIT_BUTTON: Rect = [31, 172, 80, 18];
const OK_BUTTON: Rect = [144, 172, 80, 18];

useScreenClick((x, y) => {
  if (rectContains(QUIT_BUTTON, [x, y])) {
    // TODO: outro
  } else if (rectContains(OK_BUTTON, [x, y])) {
    store.visitProject();
  }
});

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