<template>
	<section class="settings-appearance">
		<label v-html="$t('SETTINGS_APPEARANCE_DARK_MODE')" />
		<small>
			Choose a theme that Vindigo will appear as to you
		</small>
		<w-switch
			v-model="darkMode"
			color="success"
		/>

		<label>
			{{ $t('SETTINGS_APPEARANCE_LANGUAGE') }}
		</label>
		<small>
			Change the interface language Vindigo uses.
		</small>
		<client-only>
			<w-select
				:value="$i18n.locale"
				:items="$i18n.locales"
				item-label-key="name"
				item-value-key="code"
				inner-icon-left="mdi mdi-earth"
				@input="setLanguage"
			/>
		</client-only>
	</section>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
	name: 'AppearenceTab',

	props: {
		profile: {
			type: Object
		}
	},
	
	computed: {
		darkMode: {
			get(): boolean {
				return this.$store.state.isDark;
			},
			set(value: boolean) {
				this.$store.commit('setDarkMode', value);
			}
		}
	},

	methods: {
		setLanguage(value: any) {
			if(!value) return;

			this.$i18n.setLocale(value);
		}
	}
});
</script>

<style lang="scss">
.settings-appearance {
	> label:not(:first-child), > .w-divider {
		@include margin(7, t);
	}
}
</style>