<!--
  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
  -
  - @author John Molakvoæ <skjnldsv@protonmail.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>
	<AppContent>
		<div v-if="!circle">
			<EmptyContent icon="icon-circles">
				{{ t('contacts', 'Please select a circle') }}
			</EmptyContent>
		</div>

		<div v-else-if="loading">
			<EmptyContent icon="icon-loading">
				{{ t('contacts', 'Loading circle …') }}
			</EmptyContent>
		</div>

		<div v-else id="app-content-wrapper">
			<!-- member list -->
			<MemberList :list="members" :loading="loadingList" />

			<!-- main contacts details -->
			<CircleDetails :circle="circle">
				<!-- not a member -->
				<template v-if="!circle.isMember">
					<!-- Join request in progress -->
					<EmptyContent v-if="loadingJoin" icon="icon-loading">
						{{ t('contacts', 'Joining circle') }}
					</EmptyContent>

					<!-- Pending request validation -->
					<EmptyContent v-else-if="circle.isPendingJoin" icon="icon-loading">
						{{ t('contacts', 'Your request to join this circle is pending approval') }}
					</EmptyContent>

					<EmptyContent v-else icon="icon-circles">
						{{ t('contacts', 'You are not a member of {circle}', { circle: circle.displayName}) }}

						<!-- Only show the join button if the circle is accepting requests -->
						<template v-if="circle.canJoin" #desc>
							<button :disabled="loadingJoin" class="primary" @click="requestJoin">
								<Login slot="icon"
									:size="16"
									decorative />
								{{ t('contacts', 'Request to join') }}
							</button>
						</template>
					</EmptyContent>
				</template>
			</CircleDetails>
		</div>
	</AppContent>
</template>
<script>
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'

import Login from 'vue-material-design-icons/Login'

import CircleDetails from '../CircleDetails'
import MemberList from '../MemberList'
import RouterMixin from '../../mixins/RouterMixin'
import { joinCircle } from '../../services/circles.ts'
import { showError } from '@nextcloud/dialogs'

export default {
	name: 'CircleContent',

	components: {
		AppContent,
		CircleDetails,
		EmptyContent,
		Login,
		MemberList,
	},

	mixins: [RouterMixin],

	props: {
		loading: {
			type: Boolean,
			default: true,
		},
	},

	data() {
		return {
			loadingJoin: false,
			loadingList: false,
		}
	},

	computed: {
		// store variables
		circles() {
			return this.$store.getters.getCircles
		},
		circle() {
			return this.$store.getters.getCircle(this.selectedCircle)
		},
		members() {
			return Object.values(this.circle?.members || [])
		},

		/**
		 * Is the current circle empty
		 * @returns {boolean}
		 */
		isEmptyCircle() {
			return this.members.length === 0
		},
	},

	watch: {
		circle(newCircle) {
			if (newCircle?.id) {
				console.debug('Circles list is done loading, fetching members for', newCircle.id)
				this.fetchCircleMembers(newCircle.id)
			}
		},
	},

	methods: {
		async fetchCircleMembers(circleId) {
			this.loadingList = true

			try {
				await this.$store.dispatch('getCircleMembers', circleId)
			} catch (error) {
				console.error(error)
				showError(t('contacts', 'There was an error fetching the member list'))
			} finally {
				this.loadingList = false
			}
		},

		/**
		 * Request to join this circle
		 */
		async requestJoin() {
			this.loadingJoin = true

			try {
				await joinCircle(this.circle.id)
			} catch (error) {
				showError(t('contacts', 'Unable to join the circle'))
			} finally {
				this.loadingJoin = false
			}

		},
	},
}
</script>

<style lang="scss" scoped>
// TODO: replace my button component when available
button {
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	span {
		margin-right: 10px;
	}
}
</style>
