<script lang='ts' setup>
import { useQRCode } from "@vueuse/integrations/useQRCode";
import { copyOutline, qrCodeOutline, shareOutline } from "ionicons/icons";
import MaterialSymbolsDownload from "~icons/material-symbols/download";
import MaterialSymbolsUpload from "~icons/material-symbols/upload";

const userStore = useUserStore();
const { userProfile } = storeToRefs(userStore);
const url = computed(() => {
  return `riwaapp://onchain-address?user=${userProfile.value?.user.email}`;
});
const qrcode = useQRCode(url, {
  type: "image/webp",
  rendererOpts: {
    quality: 1,
  },
});
</script>

<template>
  <IonPage>
    <IonHeader>
      <IonToolbar class="ion-toolbar">
        <ion-buttons slot="start">
          <ui-back-button />
        </ion-buttons>
        <ion-title>我的二维码</ion-title>
      </IonToolbar>
    </IonHeader>
    <IonContent :fullscreen="true" class="ion-padding">
      <div class="flex justify-center items-center flex-col mt-20">
        <div class="w-[80vw] h-[80vw] bg-gray-50 max-w-130 max-h-130 rounded-[14px] p-4 flex flex-col justify-center items-center relative border border-text-900">
          <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
            <div class="p-1 rounded-full w-fit">
              <ui-avatar class="size-15 border border-text-900" />
            </div>
          </div>

          <div class="ion-text-center w-full mt-5 flex flex-col items-center">
            <div class="w-[50vw] h-[50vw] max-w-62.5 max-h-62.5 flex justify-center items-center">
              <img :src="qrcode" alt="QR Code" class="w-[90%] h-[90%] rounded-2xl">
            </div>
            <div class="mt-4">
              <ion-text color="secondary">
                <div class="text-sm text-text-400">
                  Onchain address
                </div>
              </ion-text>
              <ion-text>
                <div class="mt-4px text-md font-semibold break-all">
                  0x1234567890abcdef1234
                </div>
              </ion-text>
            </div>
          </div>
        </div>

        <div class="ion-text-center flex justify-between gap-6 w-[50%] mt-14">
          <div class="button">
            <div class="icon">
              <MaterialSymbolsUpload class="text-xl" />
            </div>
            <div class="text">
              Share
            </div>
          </div>
          <div class="button">
            <div class="icon">
              <MaterialSymbolsDownload class="text-xl" />
            </div>
            <div class="text">
              Copy
            </div>
          </div>
        </div>
      </div>
    </IonContent>
  </IonPage>
</template>

<style lang="css" scoped>
@reference "tailwindcss";

.button {
  @apply flex flex-col items-center gap-2 text-[text-500] font-medium;
}
.icon {
  @apply p-2.5 bg-(--ion-color-faint) rounded-full;
}

.text {
  @apply text-sm;
}
</style>
