<commit_before><template>
	<div class="app-content-details">
		<Loading v-if="loading"/>
		<Error v-else-if="!message"
			   :error="error && error.message ? error.message : t('mail', 'Not found')"
			   :message="errorMessage"
			   :data="error">
		</Error>
		<template v-else>
			<div id="mail-message-header" class="section">
				<h2 :title="message.subject">{{message.subject}}</h2>
				<p class="transparency">
					<AddressList :entries="message.from"/>
					to <!-- TODO: translate -->
					<AddressList :entries="message.to"/>
					<template v-if="message.cc.length">
						(cc <!-- TODO: translate -->
						<AddressList :entries="message.cc"/><!--
						-->)
					</template>
				</p>
			</div>
			<div class="mail-message-body">
				<MessageHTMLBody v-if="message.hasHtmlBody"
								 :url="htmlUrl"
								 @loaded="onHtmlBodyLoaded"/>
				<MessagePlainTextBody v-else
									  :body="message.body"
									  :signature="message.signature"/>
				<MessageAttachments :attachments="message.attachments" />
				<div id="reply-composer"></div>
				<input type="button"
					   id="forward-button"
					   value="Forward"
					   @click="forwardMessage">
			</div>
			<Composer v-if="!message.hasHtmlBody || htmlBodyLoaded"
					  :fromAccount="message.accountId"
					  :to="replyRecipient.to"
					  :cc="replyRecipient.cc"
					  :subject="replySubject"
					  :body="replyBody"
					  :replyTo="replyTo"
					  :send="sendReply"
					  :draft="saveReplyDraft"/>
		</template>
	</div>
</template>

<script>
	import { generateUrl } from 'nextcloud-server/dist/router'

	import AddressList from './AddressList'
	import {
		buildReplyBody,
		buildRecipients as buildReplyRecipients,
		buildReplySubject,
	} from '../ReplyBuilder'
	import Composer from './Composer'
	import Error from './Error'
	import {getRandomMessageErrorMessage} from '../util/ErrorMessageFactory'
	import {htmlToText} from '../util/HtmlHelper'
	import MessageHTMLBody from './MessageHTMLBody'
	import MessagePlainTextBody from './MessagePlainTextBody'
	import Loading from './Loading'
	import MessageAttachments from './MessageAttachments'
	import {saveDraft, sendMessage} from '../service/MessageService'

	export default {
		name: 'Message',
		components: {
			AddressList,
			Composer,
			Error,
			Loading,
			MessageAttachments,
			MessageHTMLBody,
			MessagePlainTextBody,
		},
		data () {
			return {
				loading: true,
				message: undefined,
				errorMessage: '',
				error: undefined,
				htmlBodyLoaded: false,
				replyRecipient: {},
				replySubject: '',
				replyBody: '',
			};
		},
		computed: {
			htmlUrl () {
				return generateUrl('/apps/mail/api/accounts/{accountId}/folders/{folderId}/messages/{id}/html', {
					accountId: this.message.accountId,
					folderId: this.message.folderId,
					id: this.message.id
				})
			},
			replyTo () {
				return {
					accountId: this.message.accountId,
					folderId: this.message.folderId,
					messageId: this.message.id,
				}
			}
		},
		created () {
			this.fetchMessage()
		},
		watch: {
			'$route' (to, from) {
				this.fetchMessage()
			}
		},
		methods: {
			fetchMessage () {
				this.loading = true
				this.message = undefined
				this.errorMessage = ''
				this.error = undefined
				this.replyRecipient = {}
				this.replySubject = ''
				this.replyBody = ''
				this.htmlBodyLoaded = false

				const messageUid = this.$route.params.messageUid

				this.$store.dispatch('fetchMessage', messageUid)
					.then(message => {
						this.message = message

						if (_.isUndefined(this.message)) {
							console.info('message could not be found', messageUid)
							this.errorMessage = getRandomMessageErrorMessage()
							this.loading = false
							return
						}

						this.replyRecipient = buildReplyRecipients(message, {}) // TODO: own address
						this.replySubject = buildReplySubject(message.subject)

						if (!message.hasHtmlBody) {
							this.setReplyText(message.body)
						}

						this.loading = false

						// TODO: add timeout so that message isn't flagged when only viewed
						// for a few seconds
						if (message.uid !== this.$route.params.messageUid) {
							console.debug('User navigated away, loaded message won\'t be flagged as seen')
							return
						}

						const envelope = this.$store.getters.getEnvelope(message.accountId, message.folderId, message.id);
						if (!envelope.flags.unseen) {
							// Already seen -> no change necessary
							return
						}

						return this.$store.dispatch('toggleEnvelopeSeen', envelope)
					})
					.catch(err => {
						console.error('could not load message ', messageUid, err)
						if (err.isError) {
							this.errorMessage = t('mail', 'Could not load your message')
							this.error = err
							this.loading = false
						}
					})
			},
			setReplyText (text) {
				const bodyText = htmlToText(text)

				this.$store.commit('setMessageBodyText', {
					uid: this.message.uid,
					bodyText,
				})

				this.replyBody = buildReplyBody(
					this.message.bodyText,
					this.message.from[0],<commit_msg>Fix outdated message flashing when navigation away<commit_after><template>
	<div class="app-content-details">
		<Loading v-if="loading"/>
		<Error v-else-if="!message"
			   :error="error && error.message ? error.message : t('mail', 'Not found')"
			   :message="errorMessage"
			   :data="error">
		</Error>
		<template v-else>
			<div id="mail-message-header" class="section">
				<h2 :title="message.subject">{{message.subject}}</h2>
				<p class="transparency">
					<AddressList :entries="message.from"/>
					to <!-- TODO: translate -->
					<AddressList :entries="message.to"/>
					<template v-if="message.cc.length">
						(cc <!-- TODO: translate -->
						<AddressList :entries="message.cc"/><!--
						-->)
					</template>
				</p>
			</div>
			<div class="mail-message-body">
				<MessageHTMLBody v-if="message.hasHtmlBody"
								 :url="htmlUrl"
								 @loaded="onHtmlBodyLoaded"/>
				<MessagePlainTextBody v-else
									  :body="message.body"
									  :signature="message.signature"/>
				<MessageAttachments :attachments="message.attachments" />
				<div id="reply-composer"></div>
				<input type="button"
					   id="forward-button"
					   value="Forward"
					   @click="forwardMessage">
			</div>
			<Composer v-if="!message.hasHtmlBody || htmlBodyLoaded"
					  :fromAccount="message.accountId"
					  :to="replyRecipient.to"
					  :cc="replyRecipient.cc"
					  :subject="replySubject"
					  :body="replyBody"
					  :replyTo="replyTo"
					  :send="sendReply"
					  :draft="saveReplyDraft"/>
		</template>
	</div>
</template>

<script>
	import { generateUrl } from 'nextcloud-server/dist/router'

	import AddressList from './AddressList'
	import {
		buildReplyBody,
		buildRecipients as buildReplyRecipients,
		buildReplySubject,
	} from '../ReplyBuilder'
	import Composer from './Composer'
	import Error from './Error'
	import {getRandomMessageErrorMessage} from '../util/ErrorMessageFactory'
	import {htmlToText} from '../util/HtmlHelper'
	import MessageHTMLBody from './MessageHTMLBody'
	import MessagePlainTextBody from './MessagePlainTextBody'
	import Loading from './Loading'
	import MessageAttachments from './MessageAttachments'
	import {saveDraft, sendMessage} from '../service/MessageService'

	export default {
		name: 'Message',
		components: {
			AddressList,
			Composer,
			Error,
			Loading,
			MessageAttachments,
			MessageHTMLBody,
			MessagePlainTextBody,
		},
		data () {
			return {
				loading: true,
				message: undefined,
				errorMessage: '',
				error: undefined,
				htmlBodyLoaded: false,
				replyRecipient: {},
				replySubject: '',
				replyBody: '',
			};
		},
		computed: {
			htmlUrl () {
				return generateUrl('/apps/mail/api/accounts/{accountId}/folders/{folderId}/messages/{id}/html', {
					accountId: this.message.accountId,
					folderId: this.message.folderId,
					id: this.message.id
				})
			},
			replyTo () {
				return {
					accountId: this.message.accountId,
					folderId: this.message.folderId,
					messageId: this.message.id,
				}
			}
		},
		created () {
			this.fetchMessage()
		},
		watch: {
			'$route' (to, from) {
				this.fetchMessage()
			}
		},
		methods: {
			fetchMessage () {
				this.loading = true
				this.message = undefined
				this.errorMessage = ''
				this.error = undefined
				this.replyRecipient = {}
				this.replySubject = ''
				this.replyBody = ''
				this.htmlBodyLoaded = false

				const messageUid = this.$route.params.messageUid

				this.$store.dispatch('fetchMessage', messageUid)
					.then(message => {
						// TODO: add timeout so that message isn't flagged when only viewed
						// for a few seconds
						if (message.uid !== this.$route.params.messageUid) {
							console.debug('User navigated away, loaded message won\'t be shown nor flagged as seen')
							return
						}

						this.message = message

						if (_.isUndefined(this.message)) {
							console.info('message could not be found', messageUid)
							this.errorMessage = getRandomMessageErrorMessage()
							this.loading = false
							return
						}

						this.replyRecipient = buildReplyRecipients(message, {}) // TODO: own address
						this.replySubject = buildReplySubject(message.subject)

						if (!message.hasHtmlBody) {
							this.setReplyText(message.body)
						}

						this.loading = false

						const envelope = this.$store.getters.getEnvelope(message.accountId, message.folderId, message.id);
						if (!envelope.flags.unseen) {
							// Already seen -> no change necessary
							return
						}

						return this.$store.dispatch('toggleEnvelopeSeen', envelope)
					})
					.catch(err => {
						console.error('could not load message ', messageUid, err)
						if (err.isError) {
							this.errorMessage = t('mail', 'Could not load your message')
							this.error = err
							this.loading = false
						}
					})
			},
			setReplyText (text) {
				const bodyText = htmlToText(text)

				this.$store.commit('setMessageBodyText', {
					uid: this.message.uid,
					bodyText,
				})

				this.replyBody = buildReplyBody(
					this.message.bodyText,
					this.message.from[0],
{'fraction_non_alphanumeric': 0.1395211350872007, 'fraction_numerical': 0.0005911912503694946, 'mean_word_length': 2.822975517890772, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 75, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4862291', 'n_tokens_mistral': 4163, 'n_tokens_neox': 3070, 'n_words': 619}