<!--
SPDX-FileCopyrightText: IndieHosters <contact@indiehosters.net>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<NcSettingsSection id="custom-nav"
		title="Navigation personnalisée"
		description="Déplacez l'ordre des applications et sélectionner les applications affichées.">
		<ul class="nav-config">
			<draggable :list.sync="apps"
				:disabled="saving"
				class="list-group"
				ghost-class="ghost"
				@update="onUpdate">
				<NcListItem v-for="app in apps"
					:key="app.id"
					:title="app.name"
					@click="toggleApp(app)">
					<template #icon>
						<NcAvatar :url="app.icon" is-no-user />
					</template>
					<template #indicator>
						<NcCheckboxRadioSwitch :checked.sync="app.displayed" disabled />
					</template>
				</NcListItem>
			</draggable>
		</ul>
		<NcCheckboxRadioSwitch v-if="isAdminPanel"
			type="switch"
			:checked.sync="disableUserEdit"
			:disabled="saving">
			Interdire la modification utilisateur
		</NcCheckboxRadioSwitch>
		<div>
			<NcButton id="save-settings-btn"
				aria-label="Save"
				type="secondary"
				:disabled="!isDirty || saving"
				@click="save">
				<template #icon>
					<NcSavingIndicatorIcon :saving="saving" :error="error" />
				</template>
				<template>Sauvegarder</template>
			</NcButton>
			<NcActions :inline="2" type="tertiary">
				<NcActionButton name="Restaurer"
					:disabled="isDefault || saving"
					@click="reset()">
					<template #icon>
						<Restore :size="20" />
					</template>
					Restaurer
				</NcActionButton>
				<NcActionButton name="Annuler"
					:disabled="!isDirty || saving"
					@click="cancel()">
					<template #icon>
						<Cancel :size="20" />
					</template>
					Annuler
				</NcActionButton>
			</NcActions>
		</div>
	</NcSettingsSection>
</template>

<script>
import { loadState } from '@nextcloud/initial-state'
import {
	NcActionButton,
	NcActions,
	NcAvatar,
	NcButton,
	NcCheckboxRadioSwitch,
	NcListItem,
	NcSavingIndicatorIcon,
	NcSettingsSection,
} from '@nextcloud/vue'
import Cancel from 'vue-material-design-icons/Cancel'
import Restore from 'vue-material-design-icons/Restore'
import draggable from 'vuedraggable'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'

const baseURL = generateUrl('/apps/customnav')
axios.defaults.baseURL = baseURL

export default {
	name: 'AdminSettings',
	components: {
		NcSettingsSection,
		NcButton,
		NcSavingIndicatorIcon,
		NcActions,
		NcActionButton,
		NcListItem,
		NcAvatar,
		NcCheckboxRadioSwitch,
		draggable,
		Restore,
		Cancel,
	},
	data() {
		const { isAdminPanel, defaultApps, disableUserEdit, apps } = loadState(
			'customnav',
			'settings',
			{}
		)
		return {
			saving: false,
			error: false,
			isAdminPanel,
			defaultApps,
			disableUserEdit,
			initialState: {
				disableUserEdit,
				apps,
			},
			apps: structuredClone(apps),
		}
	},
	computed: {
		isDirty() {
			return this.isDiff(this, this.initialState)
		},
		isDefault() {
			return !this.isDiff(this, {
				apps: this.defaultApps,
				disableUserEdit: false,
			})
		},
	},
	methods: {
		toggleApp(app) {
			if (!this.saving) {
				app.displayed = !app.displayed
			}
		},
		onUpdate() {
			for (const i in this.apps) {
				this.apps[i].order = i
			}
		},
		reset() {
			this.apps = structuredClone(this.defaultApps)
			this.disableUserEdit = false
		},
		cancel() {
			this.apps = structuredClone(this.initialState.apps)
			this.disableUserEdit = this.initialState.disableUserEdit
		},
		isDiff(a, b) {
			if (this.isAdminPanel && a.disableUserEdit !== b.disableUserEdit) {
				return true
			}
			for (const aApp of a.apps) {
				const bApp = b.apps.find((x) => x.id == aApp.id)
				if (
					!bApp
          || aApp.order != bApp.order
          || aApp.displayed !== bApp.displayed
				) {
					return true
				}
			}
			return false
		},
		save() {
			this.saving = true
			this.error = false

			const url = this.isAdminPanel ? '/settings' : '/personal-settings'
			const data = {
				apps: this.apps,
			}
			if (this.isAdminPanel) {
				data.disableUserEdit = !!this.disableUserEdit
			}

			axios
				.post(url, data)
				.then(() => {
					this.initialState = {
						apps: structuredClone(this.apps),
					}
					if (this.isAdminPanel) {
						this.initialState.disableUserEdit = this.disableUserEdit
					}
				})
				.catch((e) => {
					console.error(e)
					this.error = true
				})
				.finally(() => {
					this.saving = false
				})
		},
	},
}
</script>

<style lang="scss">
#custom-nav {
  > div:last-child {
    display: flex;
    flex-flow: row-reverse;
  }

  .nav-config {
    margin-bottom: 1em;

    .list-item {
      .avatardiv {
        background-color: var(--color-background-plain) !important;

        img {
          padding: 2px;
          border-radius: none;
        }
      }

      .list-item-content {
        .checkbox-radio-switch__label {
          opacity: inherit;

          .checkbox-radio-switch__icon {
            color: var(--color-primary-element);
          }
        }
      }
    }
  }
}
</style>
