import { createApp, h, ref } from 'vue';
import '../../resources/css/app.css';
import AppearanceTabs from '../../resources/js/components/AppearanceTabs.vue';
import {
    Avatar,
    AvatarFallback,
} from '../../resources/js/components/ui/avatar';
import { Badge } from '../../resources/js/components/ui/badge';
import { Button } from '../../resources/js/components/ui/button';
import { Checkbox } from '../../resources/js/components/ui/checkbox';
import { Input } from '../../resources/js/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '../../resources/js/components/ui/select';
import { createAppearance } from '../../resources/js/composables/useAppearance';
import { createLocalization } from '../../resources/js/lib/localization';

const Demo = {
    setup() {
        const selectedStatus = ref('review');
        const subscribed = ref(true);

        return () =>
            h('main', { class: 'mx-auto grid max-w-4xl gap-column p-page' }, [
                h(
                    'div',
                    {
                        class: 'flex flex-wrap items-center justify-between gap-stack',
                    },
                    [
                        h('div', {}, [
                            h(
                                'h1',
                                { class: 'text-headline' },
                                'Foundational UI components',
                            ),
                            h(
                                'p',
                                { class: 'text-muted-foreground' },
                                'Fluid Emerald states and controls',
                            ),
                        ]),
                        h(AppearanceTabs),
                    ],
                ),
                h('section', { class: 'grid gap-column sm:grid-cols-2' }, [
                    h(
                        'article',
                        {
                            class: 'grid content-start gap-column rounded-md border bg-card p-card',
                        },
                        [
                            h(
                                'h2',
                                { class: 'text-title' },
                                'Buttons and badges',
                            ),
                            h('div', { class: 'flex flex-wrap gap-stack' }, [
                                h(Button, {}, () => 'Primary'),
                                h(
                                    Button,
                                    { variant: 'secondary' },
                                    () => 'Secondary',
                                ),
                                h(
                                    Button,
                                    { variant: 'outline' },
                                    () => 'Outline',
                                ),
                                h(
                                    Button,
                                    { variant: 'destructive' },
                                    () => 'Delete',
                                ),
                                h(Button, { disabled: true }, () => 'Disabled'),
                                h(Button, { loading: true }, () => 'Saving'),
                            ]),
                            h('div', { class: 'flex flex-wrap gap-stack' }, [
                                h(Badge, {}, () => 'Active'),
                                h(Badge, { variant: 'success' }, () => 'Done'),
                                h(
                                    Badge,
                                    { variant: 'warning' },
                                    () => 'Medium',
                                ),
                                h(Badge, { variant: 'info' }, () => 'Low'),
                                h(
                                    Badge,
                                    { variant: 'destructive' },
                                    () => 'High',
                                ),
                                h(
                                    Badge,
                                    { variant: 'outline' },
                                    () => 'KAN-18',
                                ),
                            ]),
                        ],
                    ),
                    h(
                        'article',
                        {
                            class: 'grid content-start gap-column rounded-md border bg-card p-card',
                        },
                        [
                            h(
                                'h2',
                                { class: 'text-title' },
                                'Inputs and selection',
                            ),
                            h(
                                'label',
                                { class: 'grid gap-stack', for: 'title' },
                                [
                                    h(
                                        'span',
                                        { class: 'text-body font-medium' },
                                        'Title',
                                    ),
                                    h(Input, {
                                        id: 'title',
                                        placeholder: 'Ticket title',
                                    }),
                                ],
                            ),
                            h(
                                'label',
                                {
                                    class: 'grid gap-stack',
                                    for: 'invalid-title',
                                },
                                [
                                    h(
                                        'span',
                                        { class: 'text-body font-medium' },
                                        'Invalid title',
                                    ),
                                    h(Input, {
                                        id: 'invalid-title',
                                        invalid: true,
                                        modelValue: 'Needs attention',
                                    }),
                                ],
                            ),
                            h(
                                'label',
                                { class: 'grid gap-stack', for: 'status' },
                                [
                                    h(
                                        'span',
                                        { class: 'text-body font-medium' },
                                        'Status',
                                    ),
                                    h(
                                        Select,
                                        {
                                            modelValue: selectedStatus.value,
                                            'onUpdate:modelValue': (value) => {
                                                selectedStatus.value = value;
                                            },
                                        },
                                        {
                                            default: () => [
                                                h(
                                                    SelectTrigger,
                                                    {
                                                        id: 'status',
                                                        class: 'w-full',
                                                    },
                                                    {
                                                        default: () =>
                                                            h(SelectValue, {
                                                                placeholder:
                                                                    'Choose a status',
                                                            }),
                                                    },
                                                ),
                                                h(SelectContent, {}, () => [
                                                    h(
                                                        SelectItem,
                                                        { value: 'todo' },
                                                        () => 'To do',
                                                    ),
                                                    h(
                                                        SelectItem,
                                                        { value: 'review' },
                                                        () => 'Review',
                                                    ),
                                                    h(
                                                        SelectItem,
                                                        { value: 'done' },
                                                        () => 'Done',
                                                    ),
                                                ]),
                                            ],
                                        },
                                    ),
                                ],
                            ),
                            h(
                                'label',
                                { class: 'flex items-center gap-stack' },
                                [
                                    h(Checkbox, {
                                        modelValue: subscribed.value,
                                        'onUpdate:modelValue': (value) => {
                                            subscribed.value = Boolean(value);
                                        },
                                    }),
                                    h('span', {}, 'Notify me about changes'),
                                ],
                            ),
                        ],
                    ),
                ]),
                h(
                    'section',
                    {
                        class: 'flex items-center gap-stack rounded-md border bg-card p-card',
                    },
                    [
                        h(Avatar, { size: 'sm' }, () =>
                            h(AvatarFallback, {}, () => 'NS'),
                        ),
                        h(Avatar, {}, () => h(AvatarFallback, {}, () => 'AK')),
                        h(Avatar, { size: 'lg' }, () =>
                            h(AvatarFallback, {}, () => 'LT'),
                        ),
                        h(
                            'span',
                            { class: 'text-muted-foreground' },
                            '24px, 32px and 40px avatars',
                        ),
                    ],
                ),
            ]);
    },
};

createApp(Demo)
    .use(createLocalization())
    .use(createAppearance('light'))
    .mount('#app');