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

		<div class="simplestats-settings-row simplestats-settings-row--stacked">
			<span class="simplestats-settings-row-label">{{ text_heading }}</span>
			<p class="simplestats-settings-row-description">{{ text_description }}</p>
			<button
				type="button"
				class="simplestats-settings-primary-button"
				:disabled="busy"
				@click="onDisconnect"
			>{{ busy ? text_disconnecting : text_disconnect }}</button>
		</div>
	</div>
</template>

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

	const store = useStore();

	const busy = ref( false );

	const text_heading       = wp.i18n.__( 'Disconnect Site', 'simplestats-friendly-website-analytics' );
	const text_description   = wp.i18n.__( 'Disconnecting your site will stop sending website analytics to SimpleStats', 'simplestats-friendly-website-analytics' );
	const text_disconnect    = wp.i18n.__( 'Disconnect', 'simplestats-friendly-website-analytics' );
	const text_disconnecting = wp.i18n.__( 'Disconnecting…', 'simplestats-friendly-website-analytics' );
	const text_confirm       = wp.i18n.__( "Disconnect your site? You'll need to reconnect to resume tracking.", 'simplestats-friendly-website-analytics' );

	function onDisconnect() {
		if ( ! window.confirm( text_confirm ) ) {
			return;
		}

		busy.value = true;

		store.disconnect().always( () => {
			busy.value = false;
		} );
	}
</script>
