<template>
	<div class="sticky top-0 z-10 shrink-0">
		<Header>
			<Breadcrumbs
				:items="
					server
						? [
								{
									label: '服务器',
									route: '/servers'
								},
								{
									label: server,
									route: `/servers/${server}`
								},
								{
									label: '新建站点分组',
									route: '/groups/new'
								}
						  ]
						: [
								{ label: '站点分组', route: '/groups' },
								{ label: '新建站点分组', route: '/groups/new' }
						  ]
				"
			/>
		</Header>
	</div>

	<div
		v-if="!$team.pg?.is_desk_user && !$session.hasBenchCreationAccess"
		class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
	>
		<i-lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
		<ErrorMessage message="您没有权限创建新的站点分组" />
	</div>

	<div v-else class="mx-auto max-w-2xl px-5">
		<div v-if="options" class="space-y-12 pb-[50vh] pt-12">
			<div>
				<div class="flex items-center justify-between">
					<h2 class="text-sm font-medium leading-6 text-gray-900">
						选择 Jingrow 版本
					</h2>
				</div>
				<div class="mt-2">
					<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
						<button
							v-for="version in options.versions"
							:key="version.name"
							:class="[
								benchVersion === version.name
									? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
									: 'bg-white text-gray-900  hover:bg-gray-50',
								'flex cursor-pointer items-center justify-between rounded border border-gray-400 p-3 text-sm focus:outline-none'
							]"
							@click="benchVersion = version.name"
						>
							<span class="font-medium">{{ version.name }} </span>
							<span class="ml-1 text-gray-600">
								{{ version.status }}
							</span>
						</button>
					</div>
				</div>
			</div>
			<div
				class="flex flex-col"
				v-if="options?.clusters.length && benchVersion && !server"
			>
				<h2 class="text-sm font-medium leading-6 text-gray-900">
					选择区域
				</h2>
				<div class="mt-2 w-full space-y-2">
					<div class="grid grid-cols-2 gap-3">
						<button
							v-for="c in options?.clusters"
							:key="c.name"
							@click="benchRegion = c.name"
							:class="[
								benchRegion === c.name
									? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
									: 'border-gray-400 bg-white text-gray-900 ring-gray-200 hover:bg-gray-50',
								'flex w-full items-center rounded border p-3 text-left text-base text-gray-900'
							]"
						>
							<div class="flex w-full items-center justify-between">
								<div class="flex w-full items-center space-x-2">
									<img :src="c.image" class="h-5 w-5" />
									<span class="text-sm font-medium">
										{{ c.title }}
									</span>
								</div>
								<Badge v-if="c.beta" :label="c.beta ? '测试版' : ''" />
							</div>
						</button>
					</div>
				</div>
			</div>
			<div v-if="benchVersion && (benchRegion || server)" class="flex flex-col">
				<h2 class="text-sm font-medium leading-6 text-gray-900">
					输入站点分组标题
				</h2>
				<div class="mt-2">
					<FormControl v-model="benchTitle" type="text" />
				</div>
			</div>
			<Summary
				v-if="benchVersion && (benchRegion || server) && benchTitle"
				:options="summaryOptions"
			/>
			<div
				class="flex flex-col space-y-4"
				v-if="benchVersion && (benchRegion || server) && benchTitle"
			>
				<FormControl
type="checkbox"
					v-model="agreedToRegionConsent"
					:label="`我同意我所选地区的法律适用于我和Jingrow。`"
				/>
				<ErrorMessage class="my-2" :message="$resources.createBench.error" />
				<Button
					variant="solid"
					:disabled="!agreedToRegionConsent"
					@click="
						$resources.createBench.submit({
							bench: {
								title: benchTitle,
								version: benchVersion,
								cluster: benchRegion,
								saas_app: null,
								apps: getAppsToInstall(),
								server: server || null
							}
						})
					"
					:loading="$resources.createBench.loading"
				>
					创建Bench组
				</Button>
			</div>
		</div>
	</div>
</template>
<script>
import Summary from '../components/Summary.vue';
import Header from '../components/Header.vue';
import { DashboardError } from '../utils/error';
import { h } from 'vue';
import { Badge } from 'jingrow-ui';
import ObjectList from '../components/ObjectList.vue';

export default {
	name: 'NewReleaseGroup',
	components: {
		Summary,
		Header,
		ObjectList
	},
	props: ['server'],
	data() {
		return {
			benchTitle: '',
			benchVersion: '',
			benchRegion: '',
			agreedToRegionConsent: false
		};
	},
	resources: {
		preInstalledApps() {
			return {
				url: 'jcloud.api.bench.get_default_apps',
				initialData: {},
				auto: true
			};
		},
		options() {
			return {
				url: 'jcloud.api.bench.options',
				initialData: {
					versions: [],
					clusters: []
				},
				auto: true
			};
		},
		createBench() {
			return {
				url: 'jcloud.api.bench.new',
				validate() {
					if (!this.benchTitle) {
						throw new DashboardError('Bench组标题不能为空');
					}
					if (!this.benchVersion) {
						throw new DashboardError('请选择一个版本来创建bench');
					}
					if (!this.agreedToRegionConsent) {
						throw new DashboardError(
							'请同意上述声明以创建bench'
						);
					}
				},
				onSuccess(groupName) {
					this.$router.push({
						name: 'Release Group Detail Apps',
						params: { name: groupName }
					});
				}
			};
		}
	},
	methods: {
		getAppsToInstall() {
			let apps = [
				this.options.versions
					.find(v => v.name === this.benchVersion)
					.apps.find(app => app.name === 'jingrow')
			].map(app => {
				return {
					name: app.name,
					source: app.source.name
				};
			});

			// 添加默认应用
			apps.push(
				...this.preInstalledApps[this.benchVersion].map(app => {
					return {
						name: app.app,
						source: app.source
					};
				})
			);
			return apps;
		}
	},
	computed: {
		options() {
			return this.$resources.options.data;
		},
		preInstalledApps() {
			return this.$resources.preInstalledApps.data;
		},
		preInstalledAppsList() {
			return {
				data: () => this.preInstalledApps,
				columns: [
					{
						label: '默认应用',
						fieldname: 'app_title',
						type: 'Component',
						component: ({ row }) => {
							return h(
								'a',
								{
									class: 'flex items-center text-sm',
									href: `${row.route}`,
									target: '_blank'
								},
								[h('span', { class: 'ml-2' }, row.app_title)]
							);
						}
					}
				]
			};
		},
		summaryOptions() {
			return [
				{
					label: 'Jingrow框架版本',
					value: this.benchVersion
				},
				{
					label: '预装应用',
					value: this.preInstalledApps[this.benchVersion]
						.map(app => app.title)
						.join(', '),
					condition: () => this.preInstalledApps[this.benchVersion].length
				},
				{
					label: '地区',
					value: this.benchRegion,
					condition: () => !this.server
				},
				{
					label: '服务器',
					value: this.server,
					condition: () => this.server
				},
				{
label: '标题',
					value: this.benchTitle
				}
			];
		}
	}
};
</script>