<template>
	<Dialog
		:options="{
			title: $t('Restore'),
			actions: [
				{
					label: $t('Restore'),
					variant: 'solid',
					theme: 'red',
					loading: $resources.restoreBackup.loading,
					onClick: () => {
						$resources.restoreBackup.submit();
						showRestoreDialog = false;
					}
				}
			]
		}"
		v-model="showRestoreDialog"
	>
		<template v-slot:body-content>
			<div class="space-y-4">
				<p class="text-base">{{ $t('Restore your database using a previous backup.') }}</p>
				<div
					class="flex items-center rounded border border-gray-200 bg-gray-100 p-4 text-sm text-gray-600"
				>
					<i-lucide-alert-triangle class="mr-4 inline-block h-6 w-6" />
					<div>
						{{ $t('This operation will replace all content in your site with the <b>data</b> and <b>apps</b> from the backup.') }}
					</div>
				</div>
				<BackupFilesUploader v-model:backupFiles="selectedFiles" />
			</div>
			<div class="mt-3">
				<!-- Skip failing patches checkbox -->
				<input
					id="skip-failing"
					type="checkbox"
					class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
					v-model="skipFailingPatches"
				/>
				<label for="skip-failing" class="ml-2 text-sm text-gray-900">
					{{ $t('Skip failing patches (if any patch fails)') }}
				</label>
			</div>
			<ErrorMessage class="mt-2" :message="$resources.restoreBackup.error" />
		</template>
	</Dialog>
</template>
<script>
import { DashboardError } from '../utils/error';

export default {
	name: 'SiteDatabaseRestoreDialog',
	props: {
		site: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			showRestoreDialog: true,
			selectedFiles: {
				database: null,
				public: null,
				private: null,
				config: null
			},
			skipFailingPatches: false
		};
	},
	resources: {
		restoreBackup() {
			return {
				url: 'jcloud.api.site.restore',
				params: {
					name: this.site,
					files: this.selectedFiles,
					skip_failing_patches: this.skipFailingPatches
				},
				validate() {
					if (!this.filesUploaded) {
						throw new DashboardError(
							this.$t('Please upload database, public and private files to restore.')
						);
					}
				},
				onSuccess() {
					this.selectedFiles = {};
					this.$router.push({
						name: 'Site Jobs',
						params: { name: this.site }
					});
				}
			};
		}
	},
	computed: {
		filesUploaded() {
			return this.selectedFiles.database;
		}
	}
};
</script>