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,
	GnCombobox,
	GnDescriptionList,
	GnDropdown,
	GnEmptyState,
	GnFileUpload,
	GnInput,
	GnModal,
	GnPopover,
	GnPageHeader,
	GnProgress,
	GnRadioGroup,
	GnRange,
	GnSearchField,
	GnTabs,
	GnTooltip,
	GnToolbar,
	GnToastProvider,
	useToast
} from "gnexus-ui-kit/vue";

const DemoScreen = {
	components: {
		GnButton,
		GnActivityLog,
		GnAvatar,
		GnBadge,
		GnChip,
		GnChipGroup,
		GnCombobox,
		GnDescriptionList,
		GnDropdown,
		GnEmptyState,
		GnFileUpload,
		GnInput,
		GnModal,
		GnPopover,
		GnPageHeader,
		GnProgress,
		GnRadioGroup,
		GnRange,
		GnSearchField,
		GnTabs,
		GnTooltip,
	},
	setup() {
		const activeTab = ref("overview");
		const modalOpen = ref(false);
		const name = ref("Launch Plan");
		const query = ref("");
		const mode = ref("auto");
		const rollout = ref(72);
		const assignee = ref("");
		const files = 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 menuItems = [
			{ label: "Edit", icon: "ph-pencil-simple" },
			{ label: "Duplicate", icon: "ph-copy" },
			{ label: "Delete", icon: "ph-trash", danger: true }
		];
		const modes = [
			{ label: "Auto", value: "auto" },
			{ label: "Manual", value: "manual" },
			{ label: "Locked", value: "locked", disabled: true }
		];
		const people = [
			{ label: "Joe", value: "joe" },
			{ label: "James", value: "james" },
			{ label: "Eliza", value: "eliza" },
			{ label: "Emily", value: "emily" }
		];

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

		return {
			activeTab,
			activity,
			details,
			files,
			mode,
			menuItems,
			modalOpen,
			name,
			assignee,
			people,
			query,
			rollout,
			modes,
			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" />
						<GnDropdown :items="menuItems" />
						<GnPopover title="Context" text="Popover keeps short metadata near the action." />
						<GnTooltip text="Short contextual hint">
							<GnButton variant="primary" icon="ph-question">Help</GnButton>
						</GnTooltip>
					</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="Number(rollout)" 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">
				<div class="form-grid">
					<GnRadioGroup v-model="mode" label="Mode" :options="modes" />
					<GnRange v-model="rollout" label="Rollout" />
					<GnCombobox v-model="assignee" label="Assignee" icon="ph-user" :options="people" />
				</div>
			</section>

			<section class="section">
				<GnFileUpload v-model="files" badge="Max 12 MB" />
			</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");