<template>
  <v-menu
    v-model="profileDropdown.modal"
    :target="[profileDropdown.x, profileDropdown.y]"
  >
    <v-card
      id="demo-menu-card"
      class="pa-2"
    >
      <div class="px-4 py-2 grid-avatar">
        <v-badge
          icon="edit"
          color="minsk_900"
          @click=""
          offset-x="55"
          offset-y="52"
        >
          <v-img
            :src="userAvatar"
            width="64px"
            height="64px"
            rounded="circle"
            style="opacity: 1 !important"
          />
        </v-badge>
        <div class="ml-2">
          <v-list-item-title>
            <span>{{ t('data.profiles[0].name') }}</span>
          </v-list-item-title>
          <v-list-item-subtitle>
            <span>{{ t('data.profiles[0].licence') }}</span>
          </v-list-item-subtitle>
          <v-btn
            variant="flat"
            size="small"
            color="minsk_900"
            class="mt-1"
          >
            <span>{{ t('labels.editProfile') }}</span>
          </v-btn>
        </div>
      </div>
      <v-divider class="py-1" />
      <div class="px-4 py-2 shark-600 text-sm-semibold">
        <span>{{ t('labels.switchAccounts') }}</span>
      </div>
      <v-list
        density="compact"
        class="py-0 pb-1"
      >
        <v-list-item
          link
          prepend-avatar="https://cdn.vuetifyjs.com/images/john.jpg"
        >
          <v-list-item-title>
            <span>{{ t('data.profiles[1].name') }}</span>
          </v-list-item-title>
          <v-list-item-subtitle>
            <span>{{ t('data.profiles[1].licence') }}</span>
          </v-list-item-subtitle>
        </v-list-item>
      </v-list>
      <v-list
        density="compact"
        class="py-0 pb-1"
      >
        <v-list-item link>
          <template #prepend>
            <v-icon
              size="small"
              icon="add"
            />
          </template>
          <v-list-item-title>
            <span>{{ t('labels.addAccount') }}</span>
          </v-list-item-title>
        </v-list-item>
      </v-list>
      <v-divider class="pb-1" />
      <v-list
        density="compact"
        class="py-0 pb-1"
      >
        <v-list-item link>
          <template #prepend>
            <v-icon
              size="small"
              icon="credit_score"
            />
          </template>
          <v-list-item-title>
            <span>{{ t('labels.manageSubscription') }}</span>
          </v-list-item-title>
        </v-list-item>
        <v-list-item link>
          <template #prepend>
            <v-icon
              size="small"
              icon="credit_card"
            />
          </template>
          <v-list-item-title>
            <span>{{ t('labels.billingSettings') }}</span>
          </v-list-item-title>
        </v-list-item>
        <v-list-item link>
          <template #prepend>
            <v-icon
              size="small"
              icon="security"
            />
          </template>
          <v-list-item-title>
            <span>{{ t('labels.securitySettings') }}</span>
          </v-list-item-title>
        </v-list-item>
      </v-list>
      <v-divider class="pb-1" />
      <v-list
        density="compact"
        class="py-0 pb-1"
      >
        <v-list-item
          class="py-2"
          link
          @click="purchaseCredits"
        >
          <template #prepend>
            <v-icon
              size="small"
              icon="toll"
            />
          </template>
          <v-list-item-title>
            <span>{{ t('labels.credits') }}</span>
          </v-list-item-title>
          <v-list-item-subtitle class="sub-link">
            <span>{{ t('labels.addMoreCredits') }}</span>
          </v-list-item-subtitle>
          <template v-slot:append>
            <v-badge
              class="prog-3-5"
              content="3 / 5"
              inline
            ></v-badge>
          </template>
        </v-list-item>
        <v-list-item
          class="py-2"
          link
          @click="cloudStorage"
        >
          <template #prepend>
            <v-icon
              size="small"
              icon="cloud_done"
            />
          </template>
          <v-list-item-title>
            <span>{{ t('labels.cloudStorage') }}</span>
          </v-list-item-title>
          <v-list-item-subtitle>
            <v-progress-linear
              class="mt-2"
              :model-value="50"
              color="minsk_500"
              bg-color="shark_200"
              rounded
            />
          </v-list-item-subtitle>
          <template v-slot:append>
            <v-badge
              class="prog-1-5"
              content="1 / 3"
              inline
            ></v-badge>
          </template>
        </v-list-item>
      </v-list>
      <v-divider class="pb-1" />
      <v-list
        density="compact"
        class="py-0 pb-1"
      >
        <v-list-item
          class="py-2"
          link
        >
          <template #prepend>
            <v-icon size="small"><font-awesome-icon :icon="faApple" /></v-icon>
          </template>
          <v-list-item-title>
            <span>{{ t('labels.ios') }}</span>
          </v-list-item-title>
          <v-list-item-subtitle class="sub-link">
            <span>{{ t('labels.findOutMore') }}</span>
          </v-list-item-subtitle>
        </v-list-item>
        <v-list-item
          class="py-2"
          link
        >
          <template #prepend>
            <v-icon size="small"
              ><font-awesome-icon :icon="faAndroid"
            /></v-icon>
          </template>
          <v-list-item-title>
            <span>{{ t('labels.android') }}</span>
          </v-list-item-title>
          <v-list-item-subtitle class="sub-link">
            <span>{{ t('labels.findOutMore') }}</span>
          </v-list-item-subtitle>
        </v-list-item>
        <v-list-item
          class="py-2"
          link
        >
          <template #prepend>
            <v-icon size="small">
              <font-awesome-icon :icon="faAndroid" />
            </v-icon>
          </template>
          <v-list-item-title>
            <span>{{ t('labels.arVrAddon') }}</span>
          </v-list-item-title>
          <v-list-item-subtitle>
            <span>+{{ t('labels.perMonth', { price: addonPrice }) }}</span>
          </v-list-item-subtitle>
        </v-list-item>
      </v-list>
      <v-divider class="pb-1" />
      <v-list
        density="compact"
        class="py-0 pb-0"
      >
        <v-list-item
          link
          @click="close"
        >
          <template #prepend>
            <v-icon
              size="small"
              icon="west"
            />
          </template>
          <v-list-item-title>
            <span>{{ t('labels.backToPortal') }}</span>
          </v-list-item-title>
        </v-list-item>
      </v-list>
    </v-card>
  </v-menu>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { faAndroid, faApple } from '@fortawesome/free-brands-svg-icons';
import { useDemoStore } from '@/stores/demo.store';
import { useViewerStore } from '@/stores/viewer.store';
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';

type Emits = {
  close: [void];
};

const emit = defineEmits<Emits>();

const { t } = useI18n();
const { profileDropdown } = useDemoStore();
const { options } = storeToRefs(useViewerStore());

const addonPrice = ref<string>('2.95');

const userAvatar = computed(() => {
  const name = options.value.user?.name || 'Unknown User';
  return options.value.user?.avatarUrl || name[0];
});

async function purchaseCredits(): Promise<void> {
  if (options.value.onPurchaseCredits) {
    await options.value.onPurchaseCredits();
  }
}

async function cloudStorage(): Promise<void> {
  if (options.value.onCloudStorage) {
    // TODO: implement
    await options.value.onCloudStorage([]);
  }
}

async function close(): Promise<void> {
  if (options.value.onExit) {
    await options.value.onExit();
  }
  emit('close');
}
</script>

<style lang="scss">
#demo-menu-card {
  width: 312px;
  border-radius: var(--base, 8px);

  /* Box shadow/md */
  box-shadow:
    0px 2px 4px -2px rgba(29, 29, 73, 0.1),
    0px 4px 6px -1px rgba(29, 29, 73, 0.1);

  .v-list-item {
    .v-icon--size-small {
      font-size: 24px;
    }
  }

  .v-list-item-subtitle {
    &.sub-link {
      color: #2e3176;
      text-decoration-line: underline;
    }
    .v-progress-linear__background {
      opacity: 1 !important;
    }
  }

  .v-list-item__spacer {
    width: 12px;
  }

  .v-badge {
    &.prog-1-5 .v-badge__wrapper {
      & {
        border: 1px solid rgb(var(--v-theme-minsk_200)) !important;
        background: rgb(var(--v-theme-minsk_050)) !important;
      }
      .v-badge__badge {
        color: rgb(var(--v-theme-minsk_900)) !important;
      }
    }
    &.prog-2-5 .v-badge__wrapper {
      & {
        border: 1px solid rgb(var(--v-theme-minsk_200)) !important;
        background: rgb(var(--v-theme-minsk_050)) !important;
      }
      .v-badge__badge {
        color: rgb(var(--v-theme-minsk_900)) !important;
      }
    }
    &.prog-3-5 .v-badge__wrapper {
      & {
        border: 1px solid rgb(var(--v-theme-lightning_200)) !important;
        background: rgb(var(--v-theme-lightning_050)) !important;
      }
      .v-badge__badge {
        color: rgb(var(--v-theme-lightning_800)) !important;
      }
    }
    &.prog-4-5 .v-badge__wrapper {
      & {
        border: 1px solid rgb(var(--v-theme-lightning_200)) !important;
        background: rgb(var(--v-theme-lightning_050)) !important;
      }
      .v-badge__badge {
        color: rgb(var(--v-theme-lightning_800)) !important;
      }
    }
    &.prog-5-5 .v-badge__wrapper {
      & {
        border: 1px solid rgb(var(--v-theme-amaranth_200)) !important;
        background: rgb(var(--v-theme-amaranth_050)) !important;
      }
      .v-badge__badge {
        color: rgb(var(--v-theme-amaranth_700)) !important;
      }
    }
  }

  .v-badge__wrapper {
    & {
      margin: 0 !important;
      padding: 1px 6px !important;
      border-radius: var(--base, 8px) !important;
    }
    .v-badge__badge {
      & {
        background: unset !important;
        padding: 0 !important;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; /* 133.333% */
      }
    }
  }

  .v-ripple__container {
    border-radius: var(--base, 4px);
  }

  .grid-avatar {
    display: grid;
    flex: none;
    grid-template-areas: 'prepend content append';
    grid-template-columns: max-content 1fr auto;
    outline: none;
    max-width: 100%;
    padding: 4px 16px;
    position: relative;
    text-decoration: none;
    .v-btn {
      height: 28px !important;
      .v-btn__content {
        font-size: 12px !important;
      }
    }
    .v-badge__wrapper {
      & {
        color: rgb(var(--v-theme-minsk_900)) !important;
        margin: 0 !important;
        padding: 1px 6px !important;
        border-radius: var(--base, 8px) !important;
      }
      .v-badge__badge {
        & {
          color: rgb(var(--v-theme-minsk_900)) !important;
          cursor: pointer !important;
          border-radius: var(--sm, 3.333px);
          background: #fff !important;
          box-shadow:
            0px 0.714px 1.429px -0.714px rgba(29, 29, 73, 0.1),
            0px 1.429px 2.143px -0.357px rgba(29, 29, 73, 0.1);
          padding: 0 !important;
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: 16px; /* 133.333% */
        }
      }
    }
  }
}
</style>
