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,
	GnInput,
	GnModal,
	GnPageHeader,
	GnTabs,
	GnToastProvider,
	useToast
} from "gnexus-ui-kit/vue";

const DemoScreen = {
	components: {
		GnButton,
		GnInput,
		GnModal,
		GnPageHeader,
		GnTabs
	},
	setup() {
		const activeTab = ref("overview");
		const modalOpen = ref(false);
		const name = ref("Launch Plan");
		const toast = useToast();

		const tabs = [
			{ id: "overview", label: "Overview", icon: "ph-chart-bar" },
			{ id: "activity", label: "Activity", icon: "ph-clock" }
		];

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

		return {
			activeTab,
			modalOpen,
			name,
			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">
				<GnTabs v-model="activeTab" :items="tabs">
					<template #overview>
						<p>Use adapter components instead of local one-off markup.</p>
					</template>
					<template #activity>
						<p>Interactive state belongs to Vue; visual classes stay in the kit.</p>
					</template>
				</GnTabs>
			</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");