<template>
    <span v-if="isCut">{{ cutText }}</span>
    <span v-else class="person-text">
        <span class="firstname">{{ person.firstName }}</span>
        <!-- display: inline -->
        <span class="lastname">&nbsp;{{ person.lastName }}</span>
        <span
            v-if="person.altNames && person.altNames.length > 0"
            class="altnames"
        >
            <!-- display: inline -->
            <span :class="'altname altname-' + altNameKey"
                >&nbsp;({{ altNameLabel }})</span
            >
        </span>
        <!-- display: inline -->
        <span v-if="person.suffixText" class="suffixtext"
            >&nbsp;{{ person.suffixText }}</span
        >
        <!-- display: inline -->
        <span
            class="age"
            v-if="
                this.addAge &&
                person.birthdate !== null &&
                person.deathdate === null
            "
            >&nbsp;{{ $tc("renderbox.years_old", person.age) }}</span
        >
        <span v-else-if="this.addAge && person.deathdate !== null"
            >&nbsp;(‡)</span
        >
    </span>
</template>

<script>
export default {
    name: "PersonText",
    props: {
        person: {
            required: true,
        },
        isCut: {
            type: Boolean,
            required: false,
            default: false,
        },
        addAge: {
            type: Boolean,
            required: false,
            default: true,
        },
    },
    computed: {
        altNameLabel: function () {
            let altNameLabel = "";
            this.person.altNames.forEach(
                (altName) => (altNameLabel += altName.label),
            );
            return altNameLabel;
        },
        altNameKey: function () {
            let altNameKey = "";
            this.person.altNames.forEach(
                (altName) => (altNameKey += altName.key),
            );
            return altNameKey;
        },
        cutText: function () {
            let more = this.person.text.length > 15 ? "…" : "";
            return this.person.text.slice(0, 15) + more;
        },
    },
};
</script>
