import { createApp, h } from 'vue';
import { createInertiaApp, Head, usePage } from '@inertiajs/vue3';
import '../../resources/css/app.css';
import AppLayout from '../../resources/js/layouts/AppLayout.vue';
import { createAppearance } from '../../resources/js/composables/useAppearance';
import { createLocalization } from '../../resources/js/lib/localization';

const Preview = {
    setup() {
        const page = usePage();
        return () => {
            const title = page.url
                .split('?')[0]
                .split('/')
                .filter(Boolean)
                .at(-1);
            return h(
                AppLayout,
                {
                    breadcrumbs: [
                        { title: 'Projects', href: '/projects' },
                        ...(page.props.navigation.project
                            ? [
                                  {
                                      title: page.props.navigation.project.name,
                                      href: '/projects/7',
                                  },
                              ]
                            : []),
                        { title, href: page.url },
                    ],
                },
                () => [
                    h(Head, { title }),
                    h('div', { class: 'grid gap-column p-page' }, [
                        h(
                            'h1',
                            {
                                class: 'text-headline',
                                'data-test': 'page-title',
                            },
                            title,
                        ),
                        h(
                            'p',
                            { class: 'text-muted-foreground' },
                            'Navigation preview with isolated test data.',
                        ),
                        h(
                            'div',
                            {
                                class: 'grid gap-column sm:grid-cols-2 xl:grid-cols-3',
                            },
                            ['To do', 'In progress', 'Done'].map((label) =>
                                h(
                                    'section',
                                    {
                                        class: 'grid gap-stack rounded-md border bg-card p-card',
                                    },
                                    [
                                        h('h2', { class: 'text-title' }, label),
                                        h(
                                            'p',
                                            {},
                                            'Plan and track the next iteration.',
                                        ),
                                    ],
                                ),
                            ),
                        ),
                    ]),
                ],
            );
        };
    },
};

createInertiaApp({
    resolve: () => Preview,
    setup: ({ el, App, props, plugin }) =>
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(createLocalization())
            .use(createAppearance())
            .mount(el),
});