<template>
  <div class="profile">
    <header class="profile__header">
      <UiImg
        v-if="data.avatar"
        :src="data.avatar"
        class="profile__avatar"
        sizes="96"
        width="96"
        height="96"
      />
      <div
        v-else
        class="profile__avatar --placeholder"
      >
        <UiIcon
          class="profile__avatar-icon"
          name="user-filled"
          size="48"
        />
      </div>
      <div class="profile__header-wrapper">
        <h1 class="profile__title">{{ data?.username }}</h1>
        <span class="profile__member">
          <UiIcon
            class="profile__member-icon"
            name="time"
            size="16"
          />
          {{ $t('member_since', { date: memberSince }) }}
        </span>
        <UiLink
          :to="generateLink('/user/settings')"
          class="profile__edit"
          theme="muted"
        >
          <UiIcon
            name="edit"
            size="16"
          />
          {{ $t('edit_profile') }}</UiLink>
      </div>
    </header>
    <div class="profile__grid">
      <div
        v-for="(item, index) in items"
        :key="`profile-${index}`"
        class="profile__item"
      >
        <div class="profile__icon-wrapper">
          <UiIcon
            :name="item?.icon"
            class="profile__icon"
            size="16"
          />
        </div>
        <div class="profile__item-wrapper">
          <p class="profile__item-title">{{ item?.title }}</p>
          <p class="profile__item-text">{{ item?.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IProfileData } from '../../types';
import { convertDateToTimestamp } from '../../runtime';

interface IDataItem {
  title: string
  text: string
  icon: string
}

const data = computed(() => useState<IProfileData>('profileData').value);

const { fromUnix } = convertDateToTimestamp();

const { t, locale } = useI18n();
const { generateLink } = useGenerateLink();

const memberSince = computed(() => {
  if (!data.value?.created) return '';
  const date = new Date(data.value.created * 1000);
  return new Intl.DateTimeFormat(locale.value, { month: 'long', year: 'numeric' }).format(date);
});

const items = computed<Array<IDataItem>>(() => {
  return [
    {
      title: t('profile.country'),
      text: data.value.country?.title ?? '',
      icon: 'geo'
    },
    {
      title: t('profile.city'),
      text: data.value.city,
      icon: 'geo'
    },
      ...data.value.birthday ? [{
      title: t('profile.date_of_birth'),
      text: data.value.birthday ? fromUnix(data.value.birthday) : '',
      icon: 'date'
    }] : [],
    {
      title: t('profile.gender'),
      text: data.value.gender?.title ?? '',
      icon: 'double-user'
    },
  ];
});

const pagePureName = useGetPureRouteName();
const { meta } = useMeta({ t, pageKey: pagePureName, brandName: useAppConfig().brandName });

watchEffect(() => {
  useHead(meta.value);
});
</script>

<style lang="scss">
.profile {
  border-radius: $radius-2xl;
  background-color: $profile-bg;
  color: $profile-text;
  width: 100%;
  margin: 0 auto;
  border: 1px solid $profile-border;
  max-width: 638px;
}

.profile__header {
  padding: 32px;
  border-bottom: 1px solid $profile-header-border;
}

.profile__avatar {
  $size: 96px;

  width: $size;
  height: $size;
  object-fit: cover;
  border-radius: 50%;
}

.profile__avatar.--placeholder {
  display: grid;
  place-content: center;
  background-color: $profile-placeholder-bg;
  border: 1px solid $profile-placeholder-border;
}

.profile__avatar-icon {
  color: $profile-avatar-icon;
}

.profile__title {
  @include font-xl;

  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-weight: 700;
}

.profile__header-wrapper {
  display: grid;
  row-gap: 1px;
}

.profile__member {
  @include font-sm;

  display: grid;
  column-gap: 8px;
  align-items: center;
  grid-template-columns: auto 1fr;
  color: $profile-member-text;
  margin-top: 4px;
}

.profile__grid {
  display: grid;
  column-gap: 24px;
  row-gap: 20px;
  grid-template-columns: 1fr 1fr;
  padding: 32px;
}

.profile__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
}

.profile__item-wrapper {
  display: grid;
}

.profile__icon-wrapper {
  $size: 36px;

  display: grid;
  place-content: center;
  width: $size;
  height: $size;
  border-radius: $radius-lg;
  background-color: $profile-icon-bg;
}

.profile__icon {
  color: $profile-icon;
}

.profile__item-title {
  @include font-xs;

  margin-bottom: 2px;
  color: $profile-item-title;
}

.profile__item-text {
  @include font-sm;

  color: $profile-item-text;
}

.profile__header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 20px;
}

.profile__edit {
  @include button-variant(profile-edit);

  margin-top: 12px;
}
</style>
