<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <object-overview :query="query" title-attr="fullName" :id="id" ref="overview">
    <template #loading>
      <v-skeleton-loader type="article" />

      <v-row>
        <v-col cols="12" lg="4" v-for="idx in 3" :key="idx">
          <v-skeleton-loader type="card" />
        </v-col>
      </v-row>
    </template>
    <template #default="person">
      <detail-view>
        <template #avatarContent>
          <person-avatar-clickbox :id="id" />
        </template>

        <template #title>
          {{ person.firstName }} {{ person.lastName }}
        </template>

        <template #subtitle>
          <span v-if="person.shortName">
            <v-tooltip bottom>
              <template #activator="{ on, attrs }">
                <span v-bind="attrs" v-on="on">{{ person.shortName }}</span>
              </template>
              <span>{{ $t("person.short_name") }}</span>
            </v-tooltip>
          </span>
          <span v-if="person.shortName && person.username"> · </span>
          <span v-if="person.username">
            <v-tooltip bottom>
              <template #activator="{ on, attrs }">
                <span v-bind="attrs" v-on="on">{{ person.username }}</span>
              </template>
              <span>{{ $t("person.username") }}</span>
            </v-tooltip>
          </span>
        </template>

        <template #actions="{ classes }">
          <person-actions :class="classes" :person="person" />
        </template>

        <div class="text-center my-5" v-text="person.description"></div>

        <v-row>
          <v-col cols="12" lg="4">
            <v-card class="mb-6">
              <v-card-title>{{ $t("person.details") }}</v-card-title>

              <v-list two-line>
                <v-list-item>
                  <v-list-item-icon>
                    <v-icon> mdi-account-outline</v-icon>
                  </v-list-item-icon>

                  <v-list-item-content>
                    <v-list-item-title>
                      {{ person.firstName }}
                      {{ person.additionalName }}
                      {{ person.lastName }}
                    </v-list-item-title>
                    <v-list-item-subtitle>
                      {{ $t("person.name") }}
                    </v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
                <v-divider inset />

                <v-list-item>
                  <v-list-item-icon>
                    <v-icon> mdi-human-non-binary</v-icon>
                  </v-list-item-icon>

                  <v-list-item-content>
                    <v-list-item-title>
                      {{
                        person.sex
                          ? $t("person.sex." + person.sex.toLowerCase())
                          : "–"
                      }}
                    </v-list-item-title>
                    <v-list-item-subtitle>
                      {{ $t("person.sex_description") }}
                    </v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
                <v-divider inset />

                <v-list-item
                  v-for="(address, index) in person.addresses"
                  :key="address.id"
                >
                  <v-list-item-icon v-if="index === 0">
                    <v-icon>mdi-map-marker-outline</v-icon>
                  </v-list-item-icon>
                  <v-list-item-action v-else />
                  <v-list-item-content>
                    <v-list-item-title>
                      {{ address.street || "–" }} {{ address.housenumber }}
                      <span
                        v-if="
                          address.postalCode || address.place || address.country
                        "
                      >
                        ,
                      </span>
                      <br v-if="address.postalCode || address.place" />
                      {{ address.postalCode }} {{ address.place }}
                      <span
                        v-if="
                          (address.postalCode || address.place) &&
                          address.country
                        "
                      >
                        ,
                      </span>
                      <br v-if="address.country" />
                      {{ address.country }}
                    </v-list-item-title>
                    <v-list-item-subtitle
                      v-for="addresstype in address.addressTypes"
                      :key="addresstype.id"
                    >
                      {{ addresstype.name }}
                    </v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>

                <v-divider inset />

                <v-list-item
                  :href="person.phoneNumber ? 'tel:' + person.phoneNumber : ''"
                >
                  <v-list-item-icon>
                    <v-icon> mdi-phone-outline</v-icon>
                  </v-list-item-icon>

                  <v-list-item-content>
                    <v-list-item-title>
                      {{ person.phoneNumber || "–" }}
                    </v-list-item-title>
                    <v-list-item-subtitle>
                      {{ $t("person.home") }}
                    </v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>

                <v-list-item
                  :href="
                    person.mobileNumber ? 'tel:' + person.mobileNumber : ''
                  "
                >
                  <v-list-item-action></v-list-item-action>

                  <v-list-item-content>
                    <v-list-item-title>
                      {{ person.mobileNumber || "–" }}
                    </v-list-item-title>
                    <v-list-item-subtitle>
                      {{ $t("person.mobile") }}
                    </v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
                <v-divider inset />

                <v-list-item
                  :href="person.email ? 'mailto:' + person.email : ''"
                >
                  <v-list-item-icon>
                    <v-icon>mdi-email-outline</v-icon>
                  </v-list-item-icon>

                  <v-list-item-content>
                    <v-list-item-title>
                      {{ person.email || "–" }}
                    </v-list-item-title>
                    <v-list-item-subtitle>
                      {{ $t("person.email_address") }}
                    </v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
                <v-divider inset />

                <v-list-item>
                  <v-list-item-icon>
                    <v-icon> mdi-cake-variant-outline</v-icon>
                  </v-list-item-icon>

                  <v-list-item-content>
                    <v-list-item-title>
                      <span v-if="person.dateOfBirth && person.placeOfBirth">
                        {{
                          $t("person.birth_date_and_birth_place_formatted", {
                            date: $d(
                              $parseISODate(person.dateOfBirth),
                              "short",
                            ),
                            place: person.placeOfBirth,
                          })
                        }}
                      </span>
                      <span v-else-if="person.dateOfBirth">{{
                        $d($parseISODate(person.dateOfBirth), "short")
                      }}</span>
                      <span v-else-if="person.placeOfBirth">{{
                        person.placeOfBirth
                      }}</span>
                      <span v-else>–</span>
                    </v-list-item-title>
                    <v-list-item-subtitle>
                      <span v-if="!person.dateOfBirth === !person.placeOfBirth">
                        {{ $t("person.birth_date_and_birth_place") }}
                      </span>
                      <span v-else-if="person.dateOfBirth">
                        {{ $t("person.birth_date") }}
                      </span>
                      <span v-else-if="person.placeOfBirth">
                        {{ $t("person.birth_place") }}
                      </span>
                    </v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
              </v-list>
            </v-card>

            <additional-image :src="person.secondaryImageUrl" />
          </v-col>

          <v-col
            cols="12"
            md="6"
            lg="4"
            v-if="person.children.length || person.guardians.length"
          >
            <v-card v-if="person.children.length" class="mb-6">
              <v-card-title>{{ $t("person.children") }}</v-card-title>
              <person-collection :persons="person.children" />
            </v-card>
            <v-card v-if="person.guardians.length">
              <v-card-title>{{ $t("person.guardians") }}</v-card-title>
              <person-collection :persons="person.guardians" />
            </v-card>
          </v-col>

          <v-col
            cols="12"
            md="6"
            lg="4"
            v-if="person.memberOf.length || person.ownerOf.length"
          >
            <v-card>
              <v-card-title>{{ $t("group.title_plural") }}</v-card-title>
              <v-list-group
                :disabled="person.memberOf.length === 0"
                :append-icon="person.memberOf.length === 0 ? null : undefined"
              >
                <template #activator>
                  <v-list-item-icon>
                    <v-icon>mdi-account-group-outline</v-icon>
                  </v-list-item-icon>
                  <v-list-item-title>{{
                    $tc("group.member_of_n", person.memberOf.length)
                  }}</v-list-item-title>
                </template>
                <group-collection :groups="person.memberOf" dense />
              </v-list-group>
              <v-list-group
                :disabled="person.ownerOf.length === 0"
                :append-icon="person.ownerOf.length === 0 ? null : undefined"
              >
                <template #activator>
                  <v-list-item-icon>
                    <v-icon>mdi-account-tie-hat-outline</v-icon>
                  </v-list-item-icon>
                  <v-list-item-title>
                    {{ $tc("group.owner_of_n", person.ownerOf.length) }}
                  </v-list-item-title>
                </template>
                <group-collection :groups="person.ownerOf" dense />
              </v-list-group>
            </v-card>
          </v-col>

          <template v-for="widget in widgets">
            <v-col
              v-if="widget.shouldDisplay(person, $root.activeSchoolTerm)"
              v-bind="widget.colProps"
              :key="widget.key"
            >
              <!-- Props defined in aleksis/core/frontend/mixins/personOverviewCardMixin.js -->
              <component
                :is="widget.component"
                :person="person"
                :school-term="$root.activeSchoolTerm"
                :maximized="widgetSlug === widget.key"
                @maximize="maximizeWidget(widget.key)"
                @minimize="minimizeWidgets()"
              />
            </v-col>
          </template>
        </v-row>
      </detail-view>
    </template>
  </object-overview>
</template>

<script>
import AdditionalImage from "./AdditionalImage.vue";
import GroupCollection from "../group/GroupCollection.vue";
import ObjectOverview from "../generic/ObjectOverview.vue";
import PersonActions from "./PersonActions.vue";
import PersonAvatarClickbox from "./PersonAvatarClickbox.vue";
import PersonCollection from "./PersonCollection.vue";

import gqlPersonOverview from "./personOverview.graphql";

import { collections } from "aleksisAppImporter";

export default {
  name: "PersonOverview",
  components: {
    AdditionalImage,
    GroupCollection,
    ObjectOverview,
    PersonActions,
    PersonAvatarClickbox,
    PersonCollection,
  },
  data() {
    return {
      query: gqlPersonOverview,
    };
  },
  props: {
    id: {
      type: String,
      required: false,
      default: null,
    },
  },
  mounted() {
    if (this.$route.name == "core.me") {
      this.$router.replace({
        name: "core.personById",
        params: { id: this.$root.whoAmI.person.id },
      });
    }
  },
  methods: {
    maximizeWidget(slug) {
      if (this.widgetSlug !== slug) {
        if (this.id) {
          this.$router.push({
            name: "core.personById",
            params: { id: this.id },
            hash: "#" + slug,
          });
        } else {
          this.$router.push({
            name: "core.me",
            hash: "#" + slug,
          });
        }
      }
    },
    minimizeWidgets() {
      if (this.id) {
        this.$router.push({
          name: "core.personById",
          params: { id: this.id },
        });
      } else {
        this.$router.push({
          name: "core.me",
        });
      }
    },
  },
  computed: {
    widgets() {
      return collections.corePersonWidgets.items;
    },
    widgetSlug() {
      return this.$hash;
    },
  },
};
</script>

<style scoped></style>
