<template>
	<WizardCard>
		<div class="mb-6 text-center">
			<h1 class="text-2xl font-bold">Add a New App</h1>
			<p class="text-base text-gray-700">Add an app to marketplace</p>
		</div>

		<SelectAppFromGithub @onSelect="d => (app = d)" />

		<div v-if="app">
			<label class="mb-3 text-base" for="version-select"
				>Compatible Jingrow Version</label
			>
			<select
				id="version-select"
				class="form-select mb-4 block"
				v-model="version"
			>
				<option v-for="version in versionList" :key="version">
					{{ version }}
				</option>
			</select>

			<ErrorMessage class="mb-3" :message="$resources.addApp.error" />

			<Button
				:loading="$resources.addApp.loading"
				@click="$resources.addApp.submit()"
				variant="solid"
				class="w-full"
				>Add to marketplace</Button
			>
		</div>
	</WizardCard>
</template>

<script>
import WizardCard from '@/components/WizardCard.vue';
import SelectAppFromGithub from '@/components/SelectAppFromGithub.vue';

export default {
	name: 'NewMarketplaceApp',
	components: {
		WizardCard,
		SelectAppFromGithub
	},
	data() {
		return {
			app: null,
			version: null
		};
	},
	resources: {
		jingrowVersions() {
			return {
				url: 'jcloud.api.marketplace.jingrow_versions',
				auto: true,
				onSuccess(data) {
					if (data) {
						this.version = data[0];
					}
				}
			};
		},
		addApp() {
			return {
				url: 'jcloud.api.marketplace.new_app',
				params: {
					app: {
						name: this.app?.name,
						title: this.app?.title,
						repository_url: this.app?.repository_url,
						branch: this.app?.branch,
						github_installation_id: this.app?.github_installation_id,
						version: this.version
					}
				},
				onSuccess() {
					this.$router.push(`/marketplace/apps/${this.app.name}`);
				}
			};
		}
	},
	computed: {
		versionList() {
			if (
				!this.$resources.jingrowVersions.data ||
				this.$resources.jingrowVersions.loading
			) {
				return [];
			}
			return this.$resources.jingrowVersions.data;
		}
	}
};
</script>
