<!--
  - @copyright 2021 Christopher Ng <chrng8@gmail.com>
  -
  - @author 2021 Christopher Ng <chrng8@gmail.com>
  -
  - @license GNU AGPL version 3 or any later version
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero 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 Affero General Public License for more details.
  -
  - You should have received a copy of the GNU Affero General Public License
  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<template>
	<form id="emailform" class="section">
		<h3>
			<label for="email">{{ t('settings', 'Emails') }}</label>
			<a href="#" class="federation-menu" :aria-label="t('settings', 'Change privacy level of email')">
				<span class="icon-federation-menu icon-password">
					<span class="icon-triangle-s"></span>
				</span>
			</a>
			<Actions>
				<ActionButton icon="icon-add" @click.stop.prevent="addEmails(email, additionalEmails)">
					{{ t('settings', 'Add email address') }}
				</ActionButton>
			</Actions>
		</h3>
		<input
			type="email"
			name="email"
			id="email"
			v-model="email"
			:placeholder="t('settings', 'Your email address')" />
		<input
			v-for="(email, index) in additionalEmails"
			type="email"
			name="additionalEmail[]"
			:id="`additionalEmail-${index}`"
			v-model="email.value"
			:placeholder="t('settings', `Additional email address ${index+1}`)"
			:key="index" />
		<input type="hidden" id="emailscope" value="emailScope">
	</form>
</template>

<script>
import { Actions, ActionButton } from '@nextcloud/vue'
import axios from '@nextcloud/axios'
import * as auth from '@nextcloud/auth'
import * as router from '@nextcloud/router'

export default {
	name: 'EmailSection',
	components: {
		Actions,
		ActionButton,
	},
	props: {
		initialEmails: {
			type: Array,
			required: true,
		},
	},
	data() {
		/* eslint-disable */
		console.log(this.initialEmails)
		return {
			email: this.initialEmails[0],
			additionalEmails: this.initialEmails.slice(1).map(email => ({ value: email })),
		}
	},
	methods: {
		async addEmails(email, additionalEmails) {
			const userId = auth.getCurrentUser().uid
			// TODO upgrade @nextcloud/router to v2.0 so we can remove the .slice() trailing slash hack
			const url = router.generateOcsUrl(`cloud/users/${userId}`, 2).slice(0, -1)

			// Set the primary email
			const res = await axios.put(url, {
				key: 'email',
				value: email,
			})
			// console.log(res.data)

			// Set additional emails
			const resp = await axios.put(url, {
				key: 'additional_mail',
				value: additionalEmails.map(({ value }) => value),
			})
			// console.log(res.data)

			additionalEmails.push({ value: '' })
		}
	}
}
</script>

<style scoped>
</style>
