<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    yOffset?: number;
    opacity?: number;
    title?: string | undefined;
  }>(),
  {
    yOffset: 0,
    opacity: 1,
    title: undefined,
  },
);

const { onRender } = useScreen();

const app = useAppStore();
const { assets } = useAssets();

const BAR_WIDTH = 256;
const BAR_HEIGHT = 24;
const TITLE_Y = 5;

onRender((ctx) => {
  ctx.globalAlpha = props.opacity;

  // top bar
  ctx.drawImage(
    assets.common.barsSheet,
    0,
    (app.color.row * 4 + app.color.col) * BAR_HEIGHT,
    BAR_WIDTH,
    BAR_HEIGHT,
    0,
    -props.yOffset,
    BAR_WIDTH,
    BAR_HEIGHT,
  );

  if (props.title) {
    ctx.fillStyle = "#000000";
    ctx.font = "10px NDS10";
    fillTextCentered(ctx, props.title, 0, TITLE_Y - props.yOffset, 256);
  }

  ctx.scale(1, -1);

  // bottom bar
  ctx.drawImage(
    assets.common.barsSheet,
    0,
    (app.color.row * 4 + app.color.col) * BAR_HEIGHT,
    BAR_WIDTH,
    BAR_HEIGHT,
    0,
    -192 - props.yOffset,
    BAR_WIDTH,
    BAR_HEIGHT,
  );
}, 50);

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