<script setup lang="ts">
const store = useSettingsStore();

const { onRender } = useScreen();
const { assets: atlas } = useAssets();
const assets = atlas.images.settings.bottomScreen;

const USER_NAME = "pihkaal";
const REAL_NAME = "Stevan";

const handleCancel = () => {
  store.closeSubMenu();
};

const handleConfirm = () => {
  store.closeSubMenu();
};

onRender((ctx) => {
  ctx.font = "10px NDS10";
  ctx.textBaseline = "top";

  assets.background.draw(ctx, 0, 0);

  const drawTextField = (
    title: string,
    text: string,
    x: number,
    y: number,
  ): void => {
    // title
    ctx.fillStyle = "#282828";
    assets.user.nameTitle.draw(ctx, x + 12, y);
    fillTextHCentered(ctx, title, x + 12, y + 4, 169);

    // field
    ctx.fillStyle = "#fbfbfb";
    assets.user.nameField.draw(
      ctx,
      x,
      y + assets.user.nameTitle.rect.height - 1,
    );

    for (let i = 0; i < text.length; i += 1, x += 16) {
      ctx.fillText(text[i]!, x + 20, y + assets.user.nameTitle.rect.height + 3);
    }
  };

  drawTextField($t("settings.user.userName.userName"), USER_NAME, 31, 48);
  drawTextField($t("settings.user.userName.firstName"), REAL_NAME, 31, 96);
});

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

<template>
  <CommonButtons
    :y-offset="0"
    b-label="Cancel"
    a-label="Confirm"
    @activate-b="handleCancel"
    @activate-a="handleConfirm"
  />
</template>
