<template>
	<div class="p-5">
		<Button :route="{ name: 'Triggered' }">
			<template #prefix>
				<lucide-arrow-left class="inline-block h-4 w-4" />
			</template>
			All Auto Scales
		</Button>

		<div class="mt-3">
			<div class="flex w-full items-center">
				<h2 class="text-lg font-medium text-gray-900">
					{{ autoScale.action }}
				</h2>
				<Badge class="ml-2" :label="autoScale.status" />
				<div class="ml-auto space-x-2">
					<Button
						@click="$resources.autoScale.reload()"
						:loading="$resources.autoScale.loading"
					>
						<template #icon>
							<lucide-refresh-ccw class="h-4 w-4" />
						</template>
					</Button>
					<Dropdown :options="dropdownOptions">
						<template v-slot="{ open }">
							<Button>
								<template #icon>
									<lucide-more-horizontal class="h-4 w-4" />
								</template>
							</Button>
						</template>
					</Dropdown>
				</div>
			</div>
			<div>
				<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
					<div>
						<div class="text-sm font-medium text-gray-500">Creation</div>
						<div class="mt-2 text-sm text-gray-900">
							{{ $format.date(autoScale.creation, 'lll') }}
						</div>
					</div>
					<div>
						<div class="text-sm font-medium text-gray-500">Creator</div>
						<div class="mt-2 text-sm text-gray-900">
							{{ autoScale.owner }}
						</div>
					</div>
					<div>
						<div class="text-sm font-medium text-gray-500">Start</div>
						<div class="mt-2 text-sm text-gray-900">
							{{ $format.date(autoScale.start_time, 'lll') }}
						</div>
					</div>
					<div>
						<div class="text-sm font-medium text-gray-500">Duration</div>
						<div class="mt-2 text-sm text-gray-900">
							{{
								autoScale.duration != null
									? $format.duration(autoScale.duration)
									: '-'
							}}
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Build Steps -->
		<div class="mt-8 space-y-4">
			<JobStep v-for="step in steps" :step="step" :key="step.name" />
		</div>
	</div>
</template>
<script>
import JobStep from '../JobStep.vue';
export default {
	name: 'AutoScaleSteps',
	props: ['id'],
	components: {
		JobStep,
	},
	resources: {
		autoScale() {
			if (!this.id) return;
			return {
				type: 'document',
				doctype: 'Auto Scale Record',
				name: this.id,
				auto: true,
				transform: (record) => {
					record.steps = record.steps.map((step) => {
						return {
							name: step.name,
							title: step.title,
							output: step.output || 'No Output',
							status: step.status,
							isOpen: false,
						};
					});
				},
				onSuccess: (data) => {
					if (!['Success', 'Failure'].includes(data.status)) {
						setTimeout(() => {
							this.$resources.autoScale.reload();
						}, 5000);
					}
				},
			};
		},
	},
	computed: {
		autoScale() {
			return this.$resources.autoScale?.pg ?? {};
		},
		steps() {
			return this.$resources.autoScale?.pg?.steps || [];
		},
		dropdownOptions() {
			return [
				{
					label: 'View in Desk',
					icon: 'external-link',
					condition: () => this.$team.pg?.is_desk_user,
					onClick: () => {
						window.open(
							`${window.location.protocol}//${window.location.host}/app/auto-scale-record/${this.id}`,
							'_blank',
						);
					},
				},
			].filter((option) => option.condition?.() ?? true);
		},
	},
};
</script>
