<!--
 * This file is part of the Meeds project (https://meeds.io/).
 *
 * Copyright (C) 2023 Meeds Association contact@meeds.io
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->

<template>
  <v-flex
    class="d-flex flex-wrap">
    <div
      class="align-start text-no-wrap font-weight-bold me-3 mt-2 text-truncate">
      {{ getResolvedName(property) }}
      <profile-hidden-property-info
        :property="property"
        :hover="hover" />
    </div>
    <div
      class="align-end flex-grow-1 text-truncate text-end mt-2">
      <div
        v-if="userProperty"
        class="ms-auto width-fit-content">
        <div
          v-for="property in property.children"
          :key="property.value"
          class="my-1"
          :class="property.hidden && 'opacity-5'">
          <exo-user-avatar
            v-if="canShowChild(property)"
            :profile-id="property.value"
            :show-disabled-user="false"
            :size="28"
            class="my-auto"
            popover-left-position
            align-top />
        </div>
      </div>
      <div
        v-else
        v-for="(childProperty, i) in filteredChildren"
        :key="i"
        :title="getPropertyDisplayValue(childProperty)"
        class="text-no-wrap text-truncate">
        <v-hover v-slot="{hover}">
          <div
            v-if="canShowChild(childProperty)"
            :class="childProperty.hidden && 'opacity-5'"
            class="text-truncate">
            <div
              v-if="childProperty.hidden"
              class="d-inline-block">
              <span
                v-if="hover && !isMobile"
                class="me-2 text-caption">
                {{ $t('profileContactInformation.property.hidden.label') }}
              </span>
              <v-icon
                class="icon-default-color me-2">
                fas fa-eye-slash
              </v-icon>
            </div>
            <span
              v-if="childProperty.propertyName"
              class="pe-1 font-weight-regular text-capitalize">
              {{ getResolvedName(childProperty) }}:
            </span>
            <v-btn
              v-if="searchable"
              v-autolinker="getPropertyDisplayValue(childProperty)"
              class="primary--text font-weight-regular pa-0 ma-auto"
              min-width="auto"
              text
              @click="quickSearch(childProperty)" />
            <span
              v-else
              v-autolinker="getPropertyDisplayValue(childProperty)"></span>
          </div>
        </v-hover>
      </div>
    </div>
  </v-flex>
</template>

<script>
export default {
  props: {
    property: {
      type: Object,
      default: () => null,
    },
    searchable: {
      type: Boolean,
      default: false,
    },
    hover: {
      type: Boolean,
      default: false,
    },
    owner: {
      type: Boolean,
      default: false,
    },
    isAdmin: {
      type: Boolean,
      default: false,
    },
    isMobile: {
      type: Boolean,
      default: false,
    },
  },
  data: () => ({
    lang: eXo?.env.portal.language
  }),
  computed: {
    userProperty() {
      return this.property.propertyType === 'user';
    },
    filteredChildren() {
      return this.property.children.filter(property => !this.excludedDropdown(property));
    }
  },
  methods: {
    quickSearch(childProperty) {
      const child = {
        ...childProperty,
        value: this.property.dropDownList ?? this.getPropertyDisplayValue(childProperty)
      };
      this.$emit('quick-search', this.property, child);
    },
    getResolvedName(property) {
      return property.labels?.find(label => label.language === this.lang)?.label
          || (this.$te?.(`profileContactInformation.${property.propertyName}`)
            ? this.$t(`profileContactInformation.${property.propertyName}`)
            : property.propertyName);
    },
    canShowHiddenChildProperty(property) {
      return !property.hidden || (property.hidden && (this.isAdmin || this.owner));
    },
    canShowChild(childProperty) {
      return (childProperty.value && childProperty.visible && childProperty.active && this.canShowHiddenChildProperty(childProperty))
               || (this.property.multiValued && this.property.active && this.property.visible && childProperty.value);
    },
    excludedDropdown(property) {
      return this.property.dropdownList && !this.getPropertyOption(property);
    },
    getPropertyOption(property) {
      return this.property.dropdownList ? this.property.propertyOptions?.find(option => `${option.id}` === `${property.value}`) : null;
    },
    getPropertyDisplayValue(property) {
      const propertyOption = this.getPropertyOption(property);
      return propertyOption?.translatedValue ?? propertyOption?.value ?? property.value;
    }
  },
};
</script>
