<template>
	<div id="accessibility">
		<div id="themes" class="section">
			<h2>{{t('accessibility', 'Themes')}}</h2>
			<div class="themes-list preview-list">
				<preview v-for="preview in themes" :preview="preview"
						 :key="preview.id" :selected="selected.theme"
						 v-on:select="selectTheme"></preview>
			</div>
		</div>
		<div id="fonts" class="section">
			<h2>{{t('accessibility', 'Fonts')}}</h2>
			<div class="fonts-list preview-list">
				<preview v-for="preview in fonts" :preview="preview"
						 :key="preview.id" :selected="selected.font"
						 v-on:select="selectFont"></preview>
			</div>
		</div>
	</div>
</template>

<script>
import preview from './components/itemPreview';
import axios from 'axios';

export default {
	name: 'app',
	components: { preview },
	beforeMount() {
		// importing server data into the app
		const serverDataElmt = document.getElementById('serverData');
		if (serverDataElmt !== null) {
			this.serverData = JSON.parse(
				document.getElementById('serverData').dataset.server
			);
		}
	},
	data() {
		return {
			serverData: []
		};
	},
	computed: {
		themes() {
			return this.serverData.themes;
		},
		fonts() {
			return this.serverData.fonts;
		},
		selected() {
			return {
				theme: this.serverData.theme,
				font: this.serverData.font
			};
		},
		tokenHeaders() {
			return { headers: { requesttoken: OC.requestToken } }
		}
	},
	methods: {
		selectTheme(id) {
			this.selectItem('theme', id);
		},
		selectFont(id) {
			this.selectItem('font', id);
		},

		/**
		 * Commit a change and force reload css
		 * Fetching the file again will trigger the server update
		 *
		 * @param {string} type type of the change (font or theme)
		 * @param {string} id the data of the change
		 */
		selectItem(type, id) {
			axios
				.post(OC.linkToOCS('apps/accessibility/api/v1/config', 2) + type, {value: id}, this.tokenHeaders)
				.then(response => {
					this.serverData[type] = id;

					// Remove old link
					let link = document.querySelector('link[rel=stylesheet][href*=accessibility][href*=user-]');
					if (!link) {
						// insert new css
						let link = document.createElement('link');
						link.rel = 'stylesheet';
						link.href = OC.generateUrl('/apps/accessibility/css/user-style.css');
						document.head.appendChild(link)
					} else {
						// force update
						link.href = link.href.split('?')[0] + '?v=' + new Date().getTime();
					}
				})
				.catch(err => {
					console.log(err, err.response);
					OC.Notification.showTemporary(t('accessibility', err.response.data.ocs.meta.message + '. Unable to apply the setting.'));
				});
		}
	}
};
</script>
