import { createApp, ref } from "vue";
import "gnexus-ui-kit/dist/css/kit.css";
import "gnexus-ui-kit/dist/assets/fonts/phosphor-icons/src/css/icons.css";
import {
	GnButton,
	GnActivityLog,
	GnAvatar,
	GnBadge,
	GnChip,
	GnChipGroup,
	GnDescriptionList,
	GnEmptyState,
	GnInput,
	GnModal,
	GnPageHeader,
	GnProgress,
	GnSearchField,
	GnTabs,
	GnToolbar,
	GnToastProvider,
	useToast
} from "gnexus-ui-kit/vue";

const DemoScreen = {
	components: {
		GnButton,
		GnActivityLog,
		GnAvatar,
		GnBadge,
		GnChip,
		GnChipGroup,
		GnDescriptionList,
		GnEmptyState,
		GnInput,
		GnModal,
		GnPageHeader,
		GnProgress,
		GnSearchField,
		GnTabs
	},
	setup() {
		const activeTab = ref("overview");
		const modalOpen = ref(false);
		const name = ref("Launch Plan");
		const query = ref("");
		const toast = useToast();

		const tabs = [
			{ id: "overview", label: "Overview", icon: "ph-chart-bar" },
			{ id: "activity", label: "Activity", icon: "ph-clock" }
		];
		const details = [
			{ key: "owner", term: "Owner", value: "Ops Console" },
			{ key: "status", term: "Status", value: "Active" },
			{ key: "region", term: "Region", value: "eu-central" }
		];
		const activity = [
			{ key: "created", time: "10:12", title: "Workspace created" },
			{ key: "synced", time: "10:18", title: "Tokens synced" }
		];

		const save = () => {
			toast.success({ title: "Saved", text: `${name.value} updated` });
			modalOpen.value = false;
		};

		return {
			activeTab,
			activity,
			details,
			modalOpen,
			name,
			query,
			tabs,
			save
		};
	},
	template: `
		<main class="container docs-page">
			<GnPageHeader
				title="Vue Adapter"
				subtitle="Stable Vue components over GNexus UI Kit classes"
				kicker="GNexus UI Kit"
				accent
			>
				<template #actions>
					<GnButton variant="secondary" icon="ph-plus" @click="modalOpen = true">
						Create
					</GnButton>
				</template>
			</GnPageHeader>

			<section class="section">
				<GnToolbar title="Projects" meta="2 records">
					<template #actions>
						<GnSearchField v-model="query" placeholder="Search projects" />
					</template>
				</GnToolbar>
			</section>

			<section class="section">
				<GnTabs v-model="activeTab" :items="tabs">
					<template #overview>
						<GnDescriptionList :items="details" />
						<div class="mt-4">
							<GnProgress label="Rollout" :value="72" animated />
						</div>
						<div class="mt-4">
							<GnChipGroup>
								<GnChip variant="secondary" selected>Vue</GnChip>
								<GnChip variant="success">Stable</GnChip>
								<GnChip variant="danger">Contract</GnChip>
							</GnChipGroup>
						</div>
					</template>
					<template #activity>
						<GnActivityLog :items="activity">
							<template #actions>
								<GnBadge variant="secondary">log</GnBadge>
							</template>
						</GnActivityLog>
					</template>
				</GnTabs>
			</section>

			<section class="section">
				<GnEmptyState title="No blocking issues" text="Vue adapter components keep project markup consistent.">
					<template #actions>
						<GnAvatar initials="GN" status="online" />
						<GnBadge variant="success">Ready</GnBadge>
					</template>
				</GnEmptyState>
			</section>

			<GnModal v-model:open="modalOpen" title="Edit item">
				<GnInput v-model="name" label="Project name" icon="ph-pencil-simple" />
				<template #actions>
					<GnButton variant="primary" @click="modalOpen = false">Cancel</GnButton>
					<GnButton variant="success" @click="save">Save</GnButton>
				</template>
			</GnModal>
		</main>
	`
};

const App = {
	components: {
		GnToastProvider,
		DemoScreen
	},
	template: `
		<GnToastProvider>
			<DemoScreen />
		</GnToastProvider>
	`
};

createApp(App).mount("#app");