<template>
	<div class="simplestats-settings-card">
		<header class="simplestats-settings-card-header">
			<h2>{{ text_heading }}</h2>
		</header>

		<div class="simplestats-settings-toggles">
			<ToggleSwitch
				v-model="draft.exclude_admins"
				:label="text_exclude_admins_label"
				:description="text_exclude_admins_desc"
			/>
			<ToggleSwitch
				v-model="draft.show_admin_bar_indicator"
				:label="text_admin_bar_label"
				:description="text_admin_bar_desc"
			/>
			<ToggleSwitch
				v-model="draft.show_dashboard_widget"
				:label="text_dashboard_widget_label"
				:description="text_dashboard_widget_desc"
			/>
		</div>

		<div class="simplestats-settings-save-row">
			<button
				type="button"
				class="simplestats-settings-primary-button"
				:disabled="store.saveStatus === 'saving'"
				@click="onSave"
			>{{ store.saveStatus === 'saving' ? text_saving : text_save }}</button>

			<span v-if="store.saveStatus === 'saved'" class="simplestats-settings-save-feedback is-success">
				{{ text_saved }}
			</span>
			<span v-else-if="store.saveStatus === 'error'" class="simplestats-settings-save-feedback is-error">
				{{ text_save_error }}
			</span>

			<span class="simplestats-settings-save-note">{{ text_save_note }}</span>
		</div>
	</div>
</template>

<script setup>
	import { reactive } from 'vue';
	import { useStore } from '@/dashboard/store.js';
	import ToggleSwitch from './ToggleSwitch.vue';

	const store = useStore();

	const draft = reactive( { ...store.settings } );

	const text_heading                = wp.i18n.__( 'General', 'simplestats-friendly-website-analytics' );
	const text_exclude_admins_label   = wp.i18n.__( 'Exclude administrators from tracking', 'simplestats-friendly-website-analytics' );
	const text_exclude_admins_desc    = wp.i18n.__( 'Visits from logged-in admins will not be counted', 'simplestats-friendly-website-analytics' );
	const text_admin_bar_label        = wp.i18n.__( 'Show admin bar indicator', 'simplestats-friendly-website-analytics' );
	const text_admin_bar_desc         = wp.i18n.__( 'Display visitor count in the WP admin bar', 'simplestats-friendly-website-analytics' );
	const text_dashboard_widget_label = wp.i18n.__( 'Show dashboard widget', 'simplestats-friendly-website-analytics' );
	const text_dashboard_widget_desc  = wp.i18n.__( 'Display the SimpleStats widget on the WP Dashboard', 'simplestats-friendly-website-analytics' );
	const text_save                   = wp.i18n.__( 'Save Changes', 'simplestats-friendly-website-analytics' );
	const text_saving                 = wp.i18n.__( 'Saving…', 'simplestats-friendly-website-analytics' );
	const text_saved                  = wp.i18n.__( 'Saved', 'simplestats-friendly-website-analytics' );
	const text_save_error             = wp.i18n.__( "Couldn't save", 'simplestats-friendly-website-analytics' );
	const text_save_note              = wp.i18n.__( 'Settings changes that affect tracking take effect on the next pageview.', 'simplestats-friendly-website-analytics' );

	function onSave() {
		store.saveSettings( { ...draft } );
	}
</script>
