<script lang='ts' setup>
import { copyOutline, qrCodeOutline, shareOutline } from "ionicons/icons";

const { user } = useAuth();
</script>

<template>
  <IonPage>
    <IonHeader>
      <IonToolbar class="ui-toolbar">
        <ion-buttons slot="start">
          <ion-back-button />
        </ion-buttons>
        <ion-title>My Onchain Address</ion-title>
      </IonToolbar>
    </IonHeader>
    <IonContent :fullscreen="true" class="ion-padding">
      <div class="content-wrapper">
        <div class="container">
          <div class="user-info">
            <div class="avatar-wrapper">
              <ui-avatar class="size-18" />
            </div>
            <IonText class="user-email">
              {{ user?.email }}
            </IonText>
          </div>

          <div class="ion-text-center address-info">
            <ion-icon :icon="qrCodeOutline" class="qr-code" />
            <div class="mt-4px">
              <ion-text color="secondary">
                <div class="text-sm">
                  Onchain address
                </div>
              </ion-text>
              <ion-text>
                <div class="mt-4px">
                  0x1234567890abcdef1234
                </div>
              </ion-text>
            </div>
          </div>
        </div>

        <div class="ion-margin-top ion-text-center flex gap-6">
          <ion-button fill="clear">
            <ion-icon slot="start" :icon="shareOutline" />
            Share
          </ion-button>
          <ion-button fill="clear">
            <ion-icon slot="start" :icon="copyOutline" />
            Copy
          </ion-button>
        </div>
      </div>
    </IonContent>
  </IonPage>
</template>

<style lang="css" scoped>
.content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  --background: #f4f6f8;
  --border-color: #c6c5c5;
}
@media (prefers-color-scheme: dark) {
  .content-wrapper {
    --background: #232324;
    --border-color: #3a3a3b;
  }
}
.container {
  width: 80vw;
  height: 80vw;
  max-width: 500px;
  max-height: 500px;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: var(--background);
  border: 1px solid var(--border-color);
}
.user-email {
  margin-top: 4px;
  font-weight: 500;
  font-size: 1.1rem;
}
.user-info {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar-wrapper {
  background-color: var(--background);
  padding: 4px;
  border-radius: 100%;
  width: fit-content;
}
.avatar {
  border: 1px solid var(--border-color);
}
.address-info {
  width: 100%;
  margin-top: 20px;
}
.qr-code {
  width: 50vw;
  height: 50vw;
  max-width: 250px;
  max-height: 250px;
}
</style>
