<script setup lang="ts">
import type { StoreData } from '@/models/storeData'
import UserProfileHeaderBg from '@images/pages/user-profile-header-bg.png'

interface Props {
  storeData: StoreData
}

const props = defineProps<Props>()
</script>

<template>
  <VCard v-if="props">
    <VImg
      :src="UserProfileHeaderBg"
      min-height="80"
      max-height="120"
      cover
    />
    <VCardText class="d-flex align-bottom flex-sm-row flex-column justify-center gap-x-5">
      <div class="d-flex h-0">
        <VAvatar
          rounded
          size="120"
          :image="props.storeData.store.photoLink"
          class="user-profile-avatar mx-auto"
        />
      </div>

      <div class="user-profile-info w-100 mt-16 pt-6 pt-sm-0 mt-sm-0">
        <div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4 mb-3">
          <div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-4">
            <span class="d-flex">
              <span class="text-h5">
                {{ props.storeData.store.id_structure }} - {{ props.storeData.store.nom }}
              </span>
            </span>
          </div>
          <div class="d-flex align-center gap-4">
            <div class="d-flex flex-column">
              <span class="text-h6 font-weight-medium">{{ props.storeData.store.date_migration }}</span>
            </div>
          </div>
        </div>

        <div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4">
          <div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-4">
            <span class="d-flex">
              <VIcon
                size="20"
                icon="tabler-color-swatch"
                class="me-1"
              />
              <span class="text-body-1">
                {{ props.storeData.store.enseigne }}
              </span>
            </span>

            <span class="d-flex">
              <VIcon
                size="20"
                icon="tabler-phone-call"
                class="me-1"
              />
              <span class="text-body-1">
                {{ props.storeData.store.telephone }}
              </span>
            </span>

            <span class="d-flex">
              <VIcon
                size="20"
                icon="tabler-map-pin"
                class="me-1"
              />
              <span class="text-body-1">
                {{ props.storeData.store.adresse }} - ({{ props.storeData.store.pays }})
              </span>
            </span>
          </div>

          <div class="d-flex align-center gap-4">
            <VAvatar
              color="primary"
              variant="tonal"
              size="42"
            >
              <VIcon icon="tabler-http-post" />
            </VAvatar>

            <div class="d-flex flex-column">
              <span class="text-h5 font-weight-medium">{{ props.storeData.store.nbcaisses }}</span>
              <span class="text-sm">
                Caisses
              </span>
            </div>
          </div>
        </div>
      </div>
    </VCardText>
  </VCard>
</template>

<style lang="scss">
.user-profile-avatar {
  border: 5px solid rgb(var(--v-theme-surface));
  background-color: rgb(var(--v-theme-surface)) !important;
  inset-block-start: -3rem;

  .v-img__img {
    border-radius: 0.125rem;
  }
}
</style>
