<template>
	<notice
		v-if="tablesMissing"
		type="error"
		style="margin-top: 20px; margin-bottom: 10px"
	>
		<div class="wcc-align-center">
			<p style="margin: 0">
				<strong>
					{{
						$i18n.__(
							"Missing database tables: Some features may be disabled or not work as expected since one or more required tables are missing from the database.",
							"webtoffee-cookie-consent"
						)
					}}
				</strong>
			</p>
			<base-button
				style="margin-left: 25px"
				class="wcc-button"
				ref="wccButtonreInstallTables"
				@click.native="reInstallTables"
			>
				<template slot="loader"
					>{{ $i18n.__("Checking...", "webtoffee-cookie-consent") }}
				</template>
				{{ $i18n.__("Check again", "webtoffee-cookie-consent") }}
			</base-button>
		</div>
	</notice>
</template>

<script>
import { mapState } from "vuex";
import Notice from "@/components/elements/Notice.vue";
import wccRest from "@/helpers/api";

export default {
	name: "NoticeMissingTables",
	components: { Notice },
	data() {
		return {};
	},
	methods: {
		async reInstallTables() {
			try {
				this.$refs.wccButtonreInstallTables.startLoading();
				const response = await wccRest.post({
					path: `/settings/reinstall`,
				});
				if (response.success === true) {
					window.location.reload();
				}
			} catch (error) {
				console.log(error);
			}
		},
	},
	computed: {
		...mapState("settings", ["info"]),
		tablesMissing() {
			return !!this.info.tables_missing;
		},
	},
};
</script>
<style lang="scss">
</style>