Participant.vue

<!--
  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
	<NcListItem :name="computedName"
		:data-nav-id="participantNavigationId"
		class="participant"
		:class="{
			'participant--offline': isOffline,
			'participant--searched': isSearched }"
		:active="isSelected"
		:aria-label="participantAriaLabel"
		:actions-aria-label="participantSettingsAriaLabel"
		force-display-actions
		@click="handleClick"
		@keydown.enter="handleClick">
		<!-- Participant's avatar -->
		<template #icon>
			<AvatarWrapper :id="computedId"
				:token="isSearched ? 'new' : token"
				:name="computedName"
				:source="participant.source || participant.actorType"
				:disable-menu="isSearched"
				disable-tooltip
				:show-user-status="showUserStatus"
				:preloaded-user-status="preloadedUserStatus"
				:highlighted="isSpeakingStatusAvailable && isParticipantSpeaking"
				:offline="isOffline" />
		</template>

		<template #name>
			<!-- First line: participant's name and type -->
			<span ref="userName" class="participant__user" @mouseover="updateUserNameNeedsTitle">
				<span :title="userNameTitle" class="participant__user-name">{{ computedName }}</span>
				<span v-if="showModeratorLabel" class="participant__user-badge">({{ t('spreed', 'moderator') }})</span>
				<span v-if="isBridgeBotUser" class="participant__user-badge">({{ t('spreed', 'bot') }})</span>
				<span v-if="isGuest" class="participant__user-badge">({{ t('spreed', 'guest') }})</span>
				<span v-if="!isSelf && isLobbyEnabled && !canSkipLobby" class="participant__user-badge">({{ t('spreed', 'in the lobby') }})</span>
			</span>
		</template>

		<template #subname>
			<!-- Second line: participant status message if applicable -->
			<span v-if="isSearched && shareWithDisplayNameUnique" class="participant__status">
				{{ shareWithDisplayNameUnique }}
			</span>
			<span v-else-if="statusMessage"
				ref="statusMessage"
				class="participant__status"
				:class="{ 'participant__status--highlighted': isParticipantSpeaking }"
				:title="statusTitle"
				@mouseover="updateStatusNeedsTitle">
				{{ statusMessage }}
			</span>
		</template>

		<template v-if="!isSearched" #extra-actions>
			<!-- Phone participant dial action -->
			<template v-if="isInCall && canBeModerated && isPhoneActor">
				<NcButton v-if="!participant.inCall"
					type="success"
					:aria-label="t('spreed', 'Dial out phone')"
					:title="t('spreed', 'Dial out phone')"
					:disabled="disabled"
					@click="dialOutPhoneNumber">
					<template #icon>
						<Phone :size="20" />
					</template>
				</NcButton>
				<template v-else>
					<NcButton type="error"
						:aria-label="t('spreed', 'Hang up phone')"
						:title="t('spreed', 'Hang up phone')"
						:disabled="disabled"
						@click="hangupPhoneNumber">
						<template #icon>
							<PhoneHangup :size="20" />
						</template>
					</NcButton>
					<DialpadPanel :disabled="disabled"
						container="#tab-participants"
						dialing
						@dial:type="dialType" />
				</template>
			</template>

			<!-- Call state icon -->
			<component :is="callIcon.icon"
				v-else-if="callIcon"
				class="participant__call-state"
				:title="callIcon.title"
				:size="callIcon.size" />

			<!-- Grant or revoke lobby permissions (inline button) -->
			<template v-if="showToggleLobbyAction">
				<NcButton v-if="canSkipLobby"
					type="tertiary"
					:title="t('spreed', 'Move back to lobby')"
					@click="setLobbyPermission(false)">
					<template #icon>
						<AccountMinusIcon :size="20" />
					</template>
				</NcButton>
				<NcButton v-else
					type="tertiary"
					:title="t('spreed', 'Move to conversation')"
					@click="setLobbyPermission(true)">
					<template #icon>
						<AccountPlusIcon :size="20" />
					</template>
				</NcButton>
			</template>
		</template>

		<!-- Participant's actions menu -->
		<template v-if="showParticipantActions && actionIcon" #actions-icon>
			<component :is="actionIcon" :size="20" />
		</template>
		<template v-if="showParticipantActions" #actions>
			<!-- Information and rights -->
			<NcActionText v-if="attendeePin" :name="t('spreed', 'Dial-in PIN')">
				<template #icon>
					<Lock :size="20" />
				</template>
				{{ attendeePin }}
			</NcActionText>
			<!-- Grant or revoke moderator permissions -->
			<NcActionButton v-if="canBeDemoted"
				key="demote-moderator"
				close-after-click
				@click="demoteFromModerator">
				<template #icon>
					<Account :size="20" />
				</template>
				{{ t('spreed', 'Demote from moderator') }}
			</NcActionButton>
			<NcActionButton v-else-if="canBePromoted"
				key="promote-moderator"
				close-after-click
				@click="promoteToModerator">
				<template #icon>
					<Crown :size="20" />
				</template>
				{{ t('spreed', 'Promote to moderator') }}
			</NcActionButton>
			<NcActionButton v-if="canBeModerated && isEmailActor"
				key="resend-invitation"
				close-after-click
				@click="resendInvitation">
				<template #icon>
					<Email :size="20" />
				</template>
				{{ t('spreed', 'Resend invitation') }}
			</NcActionButton>
			<NcActionButton v-if="canSendCallNotification"
				key="send-call-notification"
				close-after-click
				@click="sendCallNotification">
				<template #icon>
					<Bell :size="20" />
				</template>
				{{ t('spreed', 'Send call notification') }}
			</NcActionButton>
			<template v-if="canBeModerated && isPhoneActor">
				<NcActionButton v-if="!conversation.hasCall && !isInCall && !participant.callId"
					key="dial-out-phone-number"
					close-after-click
					@click="dialOutPhoneNumber">
					<template #icon>
						<Phone :size="20" />
					</template>
					{{ t('spreed', 'Dial out phone number') }}
				</NcActionButton>
				<template v-else-if="isInCall && participant.callId">
					<NcActionButton v-if="phoneMuteState === 'hold'"
						key="resume-call-phone-number"
						close-after-click
						@click="unmutePhoneNumber">
						<template #icon>
							<PhoneInTalk :size="20" />
						</template>
						{{ t('spreed', 'Resume call for phone number') }}
					</NcActionButton>
					<template v-else>
						<NcActionButton key="hold-call-phone-number"
							close-after-click
							@click="holdPhoneNumber">
							<template #icon>
								<PhonePaused :size="20" />
							</template>
							{{ t('spreed', 'Put phone number on hold') }}
						</NcActionButton>
						<NcActionButton v-if="phoneMuteState === 'muted'"
							key="unmute-call-phone-number"
							close-after-click
							@click="unmutePhoneNumber">
							<template #icon>
								<Microphone :size="20" />
							</template>
							{{ t('spreed', 'Unmute phone number') }}
						</NcActionButton>
						<NcActionButton v-else
							key="mute-call-phone-number"
							close-after-click
							@click="mutePhoneNumber">
							<template #icon>
								<MicrophoneOff :size="20" />
							</template>
							{{ t('spreed', 'Mute phone number') }}
						</NcActionButton>
					</template>
				</template>
				<NcActionButton key="copy-phone-number"
					close-after-click
					@click="copyPhoneNumber">
					<template #icon>
						<ContentCopy :size="20" />
					</template>
					{{ t('spreed', 'Copy phone number') }}
				</NcActionButton>
			</template>

			<NcActionSeparator v-if="canBeModerated && isPhoneActor && showPermissionsOptions" />

			<!-- Permissions -->
			<template v-if="showPermissionsOptions">
				<NcActionButton v-if="hasNonDefaultPermissions"
					key="reset-permissions"
					close-after-click
					@click="applyDefaultPermissions">
					<template #icon>
						<LockReset :size="20" />
					</template>
					{{ t('spreed', 'Reset custom permissions') }}
				</NcActionButton>
				<NcActionButton key="grant-all-permissions"
					close-after-click
					@click="grantAllPermissions">
					<template #icon>
						<LockOpenVariant :size="20" />
					</template>
					{{ t('spreed', 'Grant all permissions') }}
				</NcActionButton>
				<NcActionButton key="remove-all-permissions"
					close-after-click
					@click="removeAllPermissions">
					<template #icon>
						<Lock :size="20" />
					</template>
					{{ t('spreed', 'Remove all permissions') }}
				</NcActionButton>
				<NcActionButton key="edit-permissions"
					close-after-click
					@click="showPermissionsEditor">
					<template #icon>
						<Pencil :size="20" />
					</template>
					{{ t('spreed', 'Edit permissions') }}
				</NcActionButton>
			</template>

			<NcActionSeparator v-if="showPermissionsOptions && canBeModerated" />

			<!-- Remove -->
			<NcActionButton v-if="canBeModerated"
				key="remove-participant"
				class="critical"
				close-after-click
				@click="isRemoveDialogOpen = true">
				<template #icon>
					<Delete :size="20" />
				</template>
				{{ removeParticipantLabel }}
			</NcActionButton>
		</template>

		<template #extra>
			<ParticipantPermissionsEditor v-if="permissionsEditor"
				:actor-id="participant.actorId"
				close-after-click
				:participant="participant"
				:token="token"
				@close="hidePermissionsEditor" />

			<!-- Confirmation required to remove participant -->
			<NcDialog v-if="isRemoveDialogOpen"
				:open.sync="isRemoveDialogOpen"
				:name="removeParticipantLabel"
				:container="container">
				<p> {{ removeDialogMessage }} </p>
				<template v-if="showBanOption">
					<NcCheckboxRadioSwitch :checked.sync="isBanParticipant">
						{{ t('spreed', 'Also ban from this conversation') }}
					</NcCheckboxRadioSwitch>
					<template v-if="isBanParticipant">
						<NcTextArea v-if="isBanParticipant"
							class="participant-dialog__input"
							resize="vertical"
							:label="t('spreed', 'Internal note (reason to ban)')"
							:error="!!maxLengthWarning"
							:helper-text="maxLengthWarning"
							:value.sync="internalNote" />
					</template>
				</template>
				<template #actions>
					<NcButton type="tertiary" :disabled="isLoading" @click="isRemoveDialogOpen = false">
						{{ t('spreed', 'Dismiss') }}
					</NcButton>
					<NcButton type="error" :disabled="isLoading || !!maxLengthWarning" @click="removeParticipant">
						{{ t('spreed', 'Remove') }}
					</NcButton>
				</template>
			</NcDialog>
		</template>
	</NcListItem>
</template>

<script>
import { inject } from 'vue'

import Account from 'vue-material-design-icons/Account.vue'
import AccountMinusIcon from 'vue-material-design-icons/AccountMinus.vue'
import AccountPlusIcon from 'vue-material-design-icons/AccountPlus.vue'
import Bell from 'vue-material-design-icons/Bell.vue'
import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
import Crown from 'vue-material-design-icons/Crown.vue'
import Delete from 'vue-material-design-icons/Delete.vue'
import Email from 'vue-material-design-icons/Email.vue'
import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
import Lock from 'vue-material-design-icons/Lock.vue'
import LockOpenVariant from 'vue-material-design-icons/LockOpenVariant.vue'
import LockReset from 'vue-material-design-icons/LockReset.vue'
import Microphone from 'vue-material-design-icons/Microphone.vue'
import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
import Pencil from 'vue-material-design-icons/Pencil.vue'
import Phone from 'vue-material-design-icons/Phone.vue'
import PhoneHangup from 'vue-material-design-icons/PhoneHangup.vue'
import PhoneInTalk from 'vue-material-design-icons/PhoneInTalk.vue'
import PhonePaused from 'vue-material-design-icons/PhonePaused.vue'
import Tune from 'vue-material-design-icons/Tune.vue'
import VideoIcon from 'vue-material-design-icons/Video.vue'

import { showError, showSuccess } from '@nextcloud/dialogs'
import { emit } from '@nextcloud/event-bus'
import { t } from '@nextcloud/l10n'

import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'

import ParticipantPermissionsEditor from './ParticipantPermissionsEditor.vue'
import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
import DialpadPanel from '../../UIShared/DialpadPanel.vue'

import { useIsInCall } from '../../../composables/useIsInCall.js'
import { CONVERSATION, PARTICIPANT, ATTENDEE, WEBINAR } from '../../../constants.js'
import {
	callSIPDialOut,
	callSIPHangupPhone,
	callSIPHoldPhone,
	callSIPMutePhone,
	callSIPUnmutePhone,
	callSIPSendDTMF,
} from '../../../services/callsService.js'
import { hasTalkFeature } from '../../../services/CapabilitiesManager.ts'
import { formattedTime } from '../../../utils/formattedTime.ts'
import { readableNumber } from '../../../utils/readableNumber.ts'
import { getStatusMessage } from '../../../utils/userStatus.js'

export default {
	name: 'Participant',

	components: {
		AvatarWrapper,
		DialpadPanel,
		NcActionButton,
		NcActionText,
		NcActionSeparator,
		NcButton,
		NcCheckboxRadioSwitch,
		NcDialog,
		NcListItem,
		NcTextArea,
		ParticipantPermissionsEditor,
		// Icons
		Account,
		AccountMinusIcon,
		AccountPlusIcon,
		Bell,
		ContentCopy,
		Crown,
		Delete,
		Email,
		HandBackLeft,
		Lock,
		LockOpenVariant,
		LockReset,
		Microphone,
		MicrophoneOff,
		Pencil,
		Phone,
		PhoneInTalk,
		PhoneHangup,
		PhonePaused,
		Tune,
		VideoIcon,
	},

	props: {
		participant: {
			type: Object,
			required: true,
		},

		/**
		 * Whether to show the user status on the avatar.
		 * This does not affect the status message row.
		 */
		showUserStatus: {
			type: Boolean,
			default: true,
		},
	},

	emits: ['click-participant'],

	setup() {
		const isInCall = useIsInCall()
		const selectedParticipants = inject('selectedParticipants', [])

		// Toggles the bulk selection state of this component
		const isSelectable = inject('bulkParticipantsSelection', false)

		return {
			isInCall,
			selectedParticipants,
			isSelectable,
		}
	},

	data() {
		return {
			isUserNameTitleVisible: false,
			isStatusTitleVisible: false,
			permissionsEditor: false,
			isRemoveDialogOpen: false,
			isBanParticipant: false,
			internalNote: '',
			disabled: false,
			isLoading: false,
		}
	},

	computed: {
		container() {
			return this.$store.getters.getMainContainerSelector()
		},

		participantNavigationId() {
			if (this.participant.actorType && this.participant.actorId) {
				return this.participant.actorType + '_' + this.participant.actorId
			} else {
				return this.participant.source + '_' + this.participant.id
			}
		},

		participantSettingsAriaLabel() {
			return t('spreed', 'Settings for participant "{user}"', { user: this.computedName })
		},

		participantAriaLabel() {
			if (this.isSearched) {
				return t('spreed', 'Add participant "{user}"', { user: this.computedName })
			} else {
				return t('spreed', 'Participant "{user}"', { user: this.computedName })
			}
		},

		userNameTitle() {
			if (!this.isUserNameTitleVisible) {
				return ''
			}
			let text = this.computedName
			if (this.showModeratorLabel) {
				text += ' (' + t('spreed', 'moderator') + ')'
			}
			if (this.isBridgeBotUser) {
				text += ' (' + t('spreed', 'bot') + ')'
			}
			if (this.isGuest) {
				text += ' (' + t('spreed', 'guest') + ')'
			}
			return text
		},

		isSpeakingStatusAvailable() {
			return this.isInCall && !!this.participant.inCall && !!this.timeSpeaking
		},

		phoneCallStatus() {
			if (!this.isPhoneActor || !this.participant.callId) {
				return undefined
			}
			return this.$store.getters.getPhoneStatus(this.participant.callId)
		},

		phoneMuteState() {
			if (!this.isPhoneActor || !this.participant.callId) {
				return undefined
			}
			switch (this.$store.getters.getPhoneMute(this.participant.callId)) {
			case PARTICIPANT.SIP_DIALOUT_FLAG.MUTE_MICROPHONE: {
				return 'muted'
			}
			case PARTICIPANT.SIP_DIALOUT_FLAG.MUTE_SPEAKER | PARTICIPANT.SIP_DIALOUT_FLAG.MUTE_MICROPHONE: {
				return 'hold'
			}
			case PARTICIPANT.SIP_DIALOUT_FLAG.NONE:
			default: {
				return undefined
			}
			}
		},

		statusMessage() {
			if (this.isInCall && this.phoneCallStatus) {
				switch (this.phoneCallStatus) {
				case 'ringing':
					return '📞 ' + t('spreed', 'Ringing …')
				case 'rejected':
					return '⚠️ ' + t('spreed', 'Call rejected')
				case 'accepted':
				case 'cleared':
					return ''
				case 'connected':
				default:
					// Fall through to show the talking time
					break
				}
			}

			if (this.isSpeakingStatusAvailable) {
				return this.isParticipantSpeaking
					? '💬 ' + t('spreed', '{time} talking …', { time: formattedTime(this.timeSpeaking, true) })
					: '💬 ' + t('spreed', '{time} talking time', { time: formattedTime(this.timeSpeaking, true) })
			}

			return getStatusMessage(this.participant)
		},

		statusTitle() {
			if (!this.isStatusTitleVisible) {
				return false
			}

			return this.statusMessage
		},

		/**
		 * Check if the current participant belongs to the selected participants array
		 * in the store
		 *
		 * @return {boolean}
		 */
		isSelected() {
			return this.isSelectable
				? this.selectedParticipants.some(selected => {
					return selected.id === this.participant.id && selected.source === this.participant.source
				})
				: false
		},

		/**
		 * If the Participant component is used as to display a search result, it will
		 * return true. We use this not to display actions on the searched contacts and
		 * groups.
		 *
		 * @return {boolean}
		 */
		isSearched() {
			return this.participant.label !== undefined
		},

		isEmailActor() {
			return this.participant.actorType === ATTENDEE.ACTOR_TYPE.EMAILS
		},

		isPhoneActor() {
			return this.participant.actorType === ATTENDEE.ACTOR_TYPE.PHONES
		},

		isUserActor() {
			return this.participant.actorType === ATTENDEE.ACTOR_TYPE.USERS
		},

		isFederatedActor() {
			return this.participant.actorType === ATTENDEE.ACTOR_TYPE.FEDERATED_USERS
		},

		isGuestActor() {
			return this.participant.actorType === ATTENDEE.ACTOR_TYPE.GUESTS
		},

		canSendCallNotification() {
			return this.isUserActor
				&& !this.isSelf
				&& (this.currentParticipant.permissions & PARTICIPANT.PERMISSIONS.CALL_START) !== 0
				// Can also be undefined, so have to check > than disconnect
				&& this.currentParticipant.participantFlags > PARTICIPANT.CALL_FLAG.DISCONNECTED
				&& this.participant.inCall === PARTICIPANT.CALL_FLAG.DISCONNECTED
		},

		computedName() {
			if (!this.isSearched) {
				const displayName = this.participant.displayName.trim()

				if (displayName === '' && this.isGuest) {
					return t('spreed', 'Guest')
				}

				if (displayName === '') {
					return t('spreed', 'Deleted user')
				}

				return displayName
			}
			return this.participant.label
		},

		computedId() {
			if (!this.isSearched) {
				return this.participant.actorId
			}
			return this.participant.id
		},

		attendeeId() {
			return this.participant.attendeeId
		},

		shareWithDisplayNameUnique() {
			return this.participant.shareWithDisplayNameUnique
		},

		isHandRaised() {
			if (this.isSearched || this.participant.inCall === PARTICIPANT.CALL_FLAG.DISCONNECTED) {
				return false
			}

			const raisedState = this.$store.getters.getParticipantRaisedHand(this.participant.sessionIds)
			return raisedState.state
		},

		callIcon() {
			if (this.isSearched || this.participant.inCall === PARTICIPANT.CALL_FLAG.DISCONNECTED) {
				return null
			} else if (this.isHandRaised) {
				return { icon: HandBackLeft, size: 18, title: t('spreed', 'Raised their hand') }
			} if (this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_VIDEO) {
				return { icon: VideoIcon, size: 20, title: t('spreed', 'Joined with video') }
			} else if (this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_PHONE) {
				return { icon: Phone, size: 20, title: t('spreed', 'Joined via phone') }
			} else {
				return { icon: Microphone, size: 20, title: t('spreed', 'Joined with audio') }
			}
		},

		participantType() {
			return this.participant.participantType
		},

		sessionIds() {
			return this.participant.sessionIds || []
		},

		participantSpeakingInformation() {
			return this.$store.getters.getParticipantSpeakingInformation(this.attendeeId)
		},

		isParticipantSpeaking() {
			return this.participantSpeakingInformation?.speaking
		},

		attendeePin() {
			return this.canBeModerated && this.participant.attendeePin ? readableNumber(this.participant.attendeePin) : ''
		},

		token() {
			return this.$store.getters.getToken()
		},

		currentParticipant() {
			return this.$store.getters.conversation(this.token) || {
				sessionId: '0',
				participantFlags: 0,
				participantType: this.$store.getters.getUserId() !== null ? PARTICIPANT.TYPE.USER : PARTICIPANT.TYPE.GUEST,
			}
		},

		conversation() {
			return this.$store.getters.conversation(this.token) || {
				type: CONVERSATION.TYPE.GROUP,
			}
		},

		isBridgeBotUser() {
			return this.participant.actorType === ATTENDEE.ACTOR_TYPE.USERS
				&& this.participant.actorId === ATTENDEE.BRIDGE_BOT_ID
		},

		isSelf() {
			return this.sessionIds.length && this.sessionIds.includes(this.currentParticipant.sessionId)
		},

		selfIsModerator() {
			return this.participantTypeIsModerator(this.currentParticipant.participantType)
		},

		/**
		 * For now the user status is not overwriting the online-offline status anymore
		 * It felt too weird having users appear as offline but they are in the call or chat actively
		 * return this.participant.status === 'offline' ||  !this.sessionIds.length && !this.isSearched
		 */
		isOffline() {
			return !this.sessionIds.length && !this.isSearched
				&& (this.isUserActor || this.isFederatedActor || this.isGuestActor)
				&& (hasTalkFeature(this.token, 'federation-v2') || !hasTalkFeature(this.token, 'federation-v1') || (!this.conversation.remoteServer && !this.isFederatedActor))
		},

		isGuest() {
			return [PARTICIPANT.TYPE.GUEST, PARTICIPANT.TYPE.GUEST_MODERATOR].includes(this.participantType)
		},

		isModerator() {
			return this.participantTypeIsModerator(this.participantType)
		},

		showBanOption() {
			return this.supportBanV1
				&& this.participant.actorType !== ATTENDEE.ACTOR_TYPE.FEDERATED_USERS
				&& this.showPermissionsOptions
		},

		showPermissionsOptions() {
			return this.canBeModerated
				&& !this.isModerator
				&& (this.participant.actorType === ATTENDEE.ACTOR_TYPE.USERS
					|| this.participant.actorType === ATTENDEE.ACTOR_TYPE.FEDERATED_USERS
					|| this.participant.actorType === ATTENDEE.ACTOR_TYPE.GUESTS
					|| this.participant.actorType === ATTENDEE.ACTOR_TYPE.EMAILS)
		},

		maxLengthWarning() {
			if (this.internalNote.length <= 4000) {
				return ''
			}
			return t('spreed', 'The text must be less than or equal to {maxLength} characters long. Your current text is {charactersCount} characters long.', {
				maxLength: 4000,
				charactersCount: this.internalNote.length,
			})
		},

		removeParticipantLabel() {
			switch (this.participant.actorType) {
			case ATTENDEE.ACTOR_TYPE.GROUPS:
				return t('spreed', 'Remove group and members')
			case ATTENDEE.ACTOR_TYPE.CIRCLES:
				return t('spreed', 'Remove team and members')
			case ATTENDEE.ACTOR_TYPE.USERS:
			default:
				return t('spreed', 'Remove participant')
			}
		},

		removeDialogMessage() {
			switch (this.participant.actorType) {
			case ATTENDEE.ACTOR_TYPE.GROUPS:
				return t('spreed', 'Do you really want to remove group "{displayName}" and its members from this conversation?',
					this.participant, undefined, { escape: false, sanitize: false })
			case ATTENDEE.ACTOR_TYPE.CIRCLES:
				return t('spreed', 'Do you really want to remove team "{displayName}" and its members from this conversation?',
					this.participant, undefined, { escape: false, sanitize: false })
			case ATTENDEE.ACTOR_TYPE.USERS:
			default:
				return t('spreed', 'Do you really want to remove {displayName} from this conversation?',
					this.participant, undefined, { escape: false, sanitize: false })
			}
		},

		showModeratorLabel() {
			return this.isModerator
				&& ![CONVERSATION.TYPE.ONE_TO_ONE, CONVERSATION.TYPE.ONE_TO_ONE_FORMER, CONVERSATION.TYPE.CHANGELOG].includes(this.conversation.type)
		},

		canBeModerated() {
			return this.participantType !== PARTICIPANT.TYPE.OWNER
				&& !this.isSelf
				&& this.selfIsModerator
				&& !this.isBridgeBotUser
		},

		canBeDemoted() {
			return this.canBeModerated
				&& [PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR].includes(this.participantType)
		},

		canBePromoted() {
			return this.canBeModerated
				&& !this.isModerator
				&& (this.participant.actorType === ATTENDEE.ACTOR_TYPE.USERS
					|| this.participant.actorType === ATTENDEE.ACTOR_TYPE.GUESTS
					|| this.participant.actorType === ATTENDEE.ACTOR_TYPE.EMAILS)
		},

		supportBanV1() {
			return hasTalkFeature(this.token, 'ban-v1')
		},

		isLobbyEnabled() {
			return this.conversation.lobbyState === WEBINAR.LOBBY.NON_MODERATORS
		},

		canSkipLobby() {
			return this.isModerator || (this.participant.permissions & PARTICIPANT.PERMISSIONS.LOBBY_IGNORE) !== 0
		},

		showToggleLobbyAction() {
			return this.canBeModerated && !this.isModerator && this.isLobbyEnabled
		},

		showParticipantActions() {
			return !this.isSearched && (this.canBeModerated || this.canSendCallNotification)
		},

		preloadedUserStatus() {
			if (Object.prototype.hasOwnProperty.call(this.participant, 'statusMessage')) {
				// We preloaded the status when via participants API
				return {
					status: this.participant.status || null,
					message: this.participant.statusMessage || null,
					icon: this.participant.statusIcon || null,
				}
			}
			if (Object.prototype.hasOwnProperty.call(this.participant, 'status')) {
				// We preloaded the status when via search API
				return {
					status: this.participant.status.status || null,
					message: this.participant.status.message || null,
					icon: this.participant.status.icon || null,
				}
			}
			return undefined
		},

		attendeePermissions() {
			return this.participant.attendeePermissions
		},

		hasNonDefaultPermissions() {
			return this.attendeePermissions !== PARTICIPANT.PERMISSIONS.DEFAULT
		},

		actionIcon() {
			if (this.isModerator) {
				return undefined
			}

			if (this.attendeePermissions === PARTICIPANT.PERMISSIONS.MAX_CUSTOM) {
				return LockOpenVariant
			} else if (this.attendeePermissions === PARTICIPANT.PERMISSIONS.CUSTOM) {
				return Lock
			} else if (this.attendeePermissions !== PARTICIPANT.PERMISSIONS.DEFAULT) {
				return Tune
			}
			return undefined
		},

		timeSpeaking() {
			if (!this.participantSpeakingInformation || this.isParticipantSpeaking === undefined) {
				return 0
			}

			return this.participantSpeakingInformation.totalCountedTime
		},
	},

	watch: {
		phoneCallStatus(value) {
			if (!value || !(value === 'ringing' || value === 'accepted')) {
				this.disabled = false
			}
		}
	},

	methods: {
		t,
		formattedTime,

		updateUserNameNeedsTitle() {
			// check if ellipsized
			const e = this.$refs.userName
			this.isUserNameTitleVisible = (e && e.offsetWidth < e.scrollWidth)
		},

		updateStatusNeedsTitle() {
			// check if ellipsized
			const e = this.$refs.statusMessage
			this.isStatusTitleVisible = (e && e.offsetWidth < e.scrollWidth)
		},

		// Used to allow selecting participants in a search.
		handleClick() {
			if (this.isSearched) {
				this.$emit('click-participant', this.participant)
			}
		},

		participantTypeIsModerator(participantType) {
			return [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR].includes(participantType)
		},

		async promoteToModerator() {
			await this.$store.dispatch('promoteToModerator', {
				token: this.token,
				attendeeId: this.attendeeId,
			})
		},

		async demoteFromModerator() {
			await this.$store.dispatch('demoteFromModerator', {
				token: this.token,
				attendeeId: this.attendeeId,
			})
		},

		async resendInvitation() {
			try {
				await this.$store.dispatch('resendInvitations', {
					token: this.token,
					attendeeId: this.attendeeId,
				})
				showSuccess(t('spreed', 'Invitation was sent to {actorId}', { actorId: this.participant.actorId }))
			} catch (error) {
				showError(t('spreed', 'Could not send invitation to {actorId}', { actorId: this.participant.actorId }))
			}
		},

		async sendCallNotification() {
			try {
				await this.$store.dispatch('sendCallNotification', {
					token: this.token,
					attendeeId: this.attendeeId,
				})
				showSuccess(t('spreed', 'Notification was sent to {displayName}', { displayName: this.participant.displayName }))
			} catch (error) {
				console.error(error)
				showError(t('spreed', 'Could not send notification to {displayName}', { displayName: this.participant.displayName }))
			}
		},

		async removeParticipant() {
			this.isLoading = true
			try {
				await this.$store.dispatch('removeParticipant', {
					token: this.token,
					attendeeId: this.attendeeId,
					banParticipant: this.isBanParticipant,
					internalNote: this.internalNote,
				})
				this.isBanParticipant = false
				this.internalNote = ''
				this.isRemoveDialogOpen = false
			} catch (error) {
				console.error('Error while removing the participant: ', error)
			} finally {
				this.isLoading = false
			}
		},

		grantAllPermissions() {
			try {
				this.$store.dispatch('grantAllPermissionsToParticipant', { token: this.token, attendeeId: this.attendeeId })
				showSuccess(t('spreed', 'Permissions granted to {displayName}', { displayName: this.computedName }))
			} catch (error) {
				showError(t('spreed', 'Could not modify permissions for {displayName}', { displayName: this.computedName }))
			}
		},

		removeAllPermissions() {
			try {
				this.$store.dispatch('removeAllPermissionsFromParticipant', { token: this.token, attendeeId: this.attendeeId })
				showSuccess(t('spreed', 'Permissions removed for {displayName}', { displayName: this.computedName }))
			} catch (error) {
				showError(t('spreed', 'Could not modify permissions for {displayName}', { displayName: this.computedName }))
			}
		},

		showPermissionsEditor() {
			this.permissionsEditor = true
		},

		hidePermissionsEditor() {
			this.permissionsEditor = false
		},

		applyDefaultPermissions() {
			try {
				this.$store.dispatch('setPermissions', { token: this.token, attendeeId: this.attendeeId, permissions: PARTICIPANT.PERMISSIONS.DEFAULT })
				showSuccess(t('spreed', 'Permissions set to default for {displayName}', { displayName: this.computedName }))
			} catch (error) {
				showError(t('spreed', 'Could not modify permissions for {displayName}', { displayName: this.computedName }))
			}
		},

		async setLobbyPermission(value) {
			try {
				await this.$store.dispatch('setPermissions', {
					token: this.token,
					attendeeId: this.attendeeId,
					method: value ? 'add' : 'remove',
					permissions: PARTICIPANT.PERMISSIONS.LOBBY_IGNORE,
				})
				if (value) {
					showSuccess(t('spreed', 'Permissions granted to {displayName}', { displayName: this.computedName }))
				} else {
					showSuccess(t('spreed', 'Permissions removed for {displayName}', { displayName: this.computedName }))
				}
			} catch (error) {
				showError(t('spreed', 'Could not modify permissions for {displayName}', { displayName: this.computedName }))
			}
		},

		async dialOutPhoneNumber() {
			try {
				this.disabled = true
				if (!this.isInCall) {
					let flags = PARTICIPANT.CALL_FLAG.IN_CALL
					flags |= PARTICIPANT.CALL_FLAG.WITH_AUDIO

					// Close navigation
					emit('toggle-navigation', { open: false })
					console.info('Joining call')
					await this.$store.dispatch('joinCall', {
						token: this.token,
						participantIdentifier: this.$store.getters.getParticipantIdentifier(),
						flags,
						silent: false,
						recordingConsent: true,
					})
				}
				await callSIPDialOut(this.token, this.participant.attendeeId)
			} catch (error) {
				this.disabled = false
				if (error?.response?.data?.ocs?.data?.message) {
					showError(t('spreed', 'Phone number could not be called: {error}', {
						error: error?.response?.data?.ocs?.data?.message
					}))
				} else {
					console.error(error)
					showError(t('spreed', 'Phone number could not be called'))
				}
			}
		},

		async hangupPhoneNumber() {
			try {
				this.disabled = true
				await callSIPHangupPhone(this.sessionIds[0])
			} catch (error) {
				showError(t('spreed', 'Phone number could not be hung up'))
				this.disabled = false
			}
		},
		async holdPhoneNumber() {
			try {
				await callSIPHoldPhone(this.sessionIds[0])
				this.$store.dispatch('setPhoneMute', {
					callid: this.participant.callId,
					value: PARTICIPANT.SIP_DIALOUT_FLAG.MUTE_MICROPHONE | PARTICIPANT.SIP_DIALOUT_FLAG.MUTE_SPEAKER,
				})
			} catch (error) {
				showError(t('spreed', 'Phone number could not be put on hold'))
			}
		},
		async mutePhoneNumber() {
			try {
				await callSIPMutePhone(this.sessionIds[0])
				this.$store.dispatch('setPhoneMute', {
					callid: this.participant.callId,
					value: PARTICIPANT.SIP_DIALOUT_FLAG.MUTE_MICROPHONE,
				})
			} catch (error) {
				showError(t('spreed', 'Phone number could not be muted'))
			}
		},
		async unmutePhoneNumber() {
			try {
				await callSIPUnmutePhone(this.sessionIds[0])
				this.$store.dispatch('setPhoneMute', {
					callid: this.participant.callId,
					value: PARTICIPANT.SIP_DIALOUT_FLAG.NONE,
				})
			} catch (error) {
				showError(t('spreed', 'Phone number could not be unmuted'))
			}
		},
		async dialType(value) {
			try {
				await callSIPSendDTMF(this.sessionIds[0], value)
			} catch (error) {
				showError(t('spreed', 'DTMF message could not be sent'))
			}
		},

		async copyPhoneNumber() {
			try {
				await navigator.clipboard.writeText(this.participant.phoneNumber)
				showSuccess(t('spreed', 'Phone number copied to clipboard'))
			} catch (error) {
				showError(t('spreed', 'Phone number could not be copied'))
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.participant {
	line-height: 20px;

	// Overwrite NcListItem styles
	:deep(.list-item) {
		overflow: hidden;
		outline-offset: -2px;
		cursor: default;

		a, a * {
			cursor: default;
		}

		button, button * {
			cursor: pointer;
		}

		// FIXME clean up after nextcloud/vue release
		.avatardiv .avatardiv__user-status {
			right: -2px !important;
			bottom: -2px !important;
			min-height: 14px !important;
			min-width: 14px !important;
			line-height: 1 !important;
			font-size: clamp(var(--font-size-small), 85%, var(--default-font-size)) !important;
		}
	}

	&--offline &__user-name {
		color: var(--color-text-maxcontrast);
	}

	&--searched :deep(.list-item),
	&--searched :deep(.list-item a),
	&--searched :deep(.list-item a *) {
		cursor: pointer;
	}

	&.list-item__wrapper--active,
	&.list-item__wrapper.active {
		:deep(.list-item) {
			background-color: var(--color-primary-element-light);

			&:hover,
			&:focus-within,
			&:has(:focus-visible),
			&:has(:active) {
				background-color: var(--color-primary-element-light-hover);
			}

			.list-item-content__name,
			.list-item-content__subname,
			.list-item-content__details,
			.list-item-details__details {
				color: var(--color-primary-light-text) !important;
			}
		}
	}

	&__user-badge {
		color: var(--color-text-maxcontrast);
		font-weight: 300;
		padding-inline-start: var(--default-grid-baseline);
	}

	&__user {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__status {
		&--highlighted {
			font-weight: bold;
		}
	}

	&__call-state {
		height: 100%;
		display: flex;
		align-items: center;
		color: var(--color-text-maxcontrast);
	}

	:deep(.list-item-content__actions > .critical) {
		color: var(--color-error);
	}
}

.participant-dialog {
	&__input {
		margin-block-end: 6px;
	}
}

.critical > :deep(.action-button) {
	color: var(--color-error);
}

</style>