import React, { useState, useEffect, useRef } from 'react';
import { UdpFluentButton, UdpFluentDrawer, UdpFluentTablist, UdpTabPanel, UdpFluentDialog, UdpFluentTextInput, UdpFluentCheckbox, UdpFormComponent, UdpField, UdpFluentMenu, UdpCompoundButton, UdpIcon } from 'udp-react-stencil-component-library';
import { ClientSideUdpGrid } from '../UI/templates/newGrid';
const checkboxMenuItems = [
    {
        id: 'c1-1',
        text: 'Checkbox 1-A',
        sectionNumber: 1,
        type: 'checkbox'
    },
    {
        id: 'c1-2',
        text: 'Checkbox 1-B',
        sectionNumber: 1,
        type: 'checkbox'
    },
    {
        id: 'c2-1',
        text: 'Checkbox 2-A',
        sectionNumber: 2,
        type: 'checkbox'
    },
    {
        id: 'c2-2',
        text: 'Checkbox 2-B',
        sectionNumber: 2,
        type: 'checkbox'
    },
    { id: 'c3', text: 'More Options' },
    {
        id: 'c3-1',
        text: 'Sub Checkbox 1',
        parentId: 'c3',
        type: 'checkbox'
    },
    {
        id: 'c3-2',
        text: 'Sub Checkbox 2',
        parentId: 'c3',
        type: 'checkbox'
    }
];
const mustHaveExclamation = (value) => {
    // 1. Skip validation if empty (let 'required' handle empty states)
    if (!value)
        return undefined;
    // 2. Check logic
    if (typeof value === 'string' && value.includes('!')) {
        return undefined; // Valid
    }
    // 3. Return error message
    return 'You must include an exclamation mark (!)';
};
export const TestStencilWrappedComponentsPage = () => {
    const [open, setOpen] = useState(false);
    const [dialogOpen, setDialogOpen] = useState(false);
    const [formDrawerOpen, setFormDrawerOpen] = useState(false);
    const [activeTab, setActiveTab] = useState('tab1');
    const [formData, setFormData] = useState({});
    const [isLoading, setIsLoading] = useState(true);
    const formInstance = useRef(null);
    useEffect(() => {
        // Simulate an API call taking 2 seconds
        console.log('Fetching data...');
        const timer = setTimeout(() => {
            setFormData({
                firstName: 'Async John',
                email: 'async_john@example.com',
                age: '45', // Note: Strings are safer for inputs than numbers
                newsletter: true,
                exclamation: 'Late arrival!'
            });
            setIsLoading(false);
        }, 2000);
        return () => clearTimeout(timer);
    }, []);
    const handleDrawerClose = () => {
        setOpen(false);
    };
    const handleDialogClose = () => {
        setDialogOpen(false);
    };
    const handleFormDrawerClose = () => {
        setFormDrawerOpen(false);
    };
    const handleFormSubmit = (values) => {
        console.log('Form submitted with values:', values);
        setFormDrawerOpen(false);
    };
    const validateForm = (values) => {
        const errors = {};
        console.log('Validating:', values);
        return errors;
    };
    const handleFormReady = (e) => {
        formInstance.current = e.detail;
    };
    return (React.createElement("div", { style: {
            display: 'flex',
            flexDirection: 'column'
        } }, React.createElement(UdpFluentButton, { onClick: () => setOpen(true) }, "Open Sideshee"), React.createElement(UdpFluentButton, { onClick: () => setFormDrawerOpen(true) }, "Open Form Drawe"), React.createElement(UdpCompoundButton, { appearance: "transparent", shape: "rounded", size: "medium", onClick: () => console.log('Compound Button Clicked') }, React.createElement("span", { slot: "description" }, "Description content"), React.createElement(UdpIcon, { iconName: "add", slot: "start", color: "inherit" }), "Compound Butto"), React.createElement(UdpFluentDrawer, { open: open, onDrawerClose: handleDrawerClose, title: "Drawer Title" }, React.createElement(ClientSideUdpGrid, { columnDefs: [
            { field: 'make' },
            { field: 'model' },
            { field: 'price' }
        ], rowData: [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxster', price: 72000 }
        ] })), React.createElement(UdpFluentDrawer, { open: formDrawerOpen, onDrawerClose: handleFormDrawerClose }, isLoading ? (React.createElement("div", null, "Loading form data...")) : (React.createElement(UdpFormComponent, { id: "user-form", validate: validateForm, onFormReady: handleFormReady, onSubmit: handleFormSubmit, initialValues: formData }, React.createElement("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' } }, React.createElement(UdpField, { name: "firstName" }, React.createElement(UdpFluentTextInput, { label: "First Name" })), React.createElement(UdpField, { name: "email" }, React.createElement(UdpFluentTextInput, { label: "Email Address", type: "email", autoFocus: true, controlSize: "large", value: "jordanatchison@univerus.com" })), React.createElement(UdpField, { name: "age" }, React.createElement(UdpFluentTextInput, { label: "Age", required: true })), React.createElement(UdpField, { name: "exclamation", validate: mustHaveExclamation }, React.createElement(UdpFluentTextInput, { label: "Exclamation", hint: "exclamation mark please" })), React.createElement(UdpField, { name: "newsletter" }, React.createElement(UdpFluentCheckbox, { disabled: true, label: "Subscribe to newsletter", hint: "We will only send you emails about important updates" }))))), React.createElement(UdpFluentButton, { appearance: "primary", slot: "footer", onClick: () => {
            var _a;
            return void ((_a = formInstance.current) === null || _a === void 0 ? void 0 : _a.submit());
        } }, "Submit For")), React.createElement("div", { style: {
            display: 'flex',
            flexDirection: 'column',
            gap: '1rem',
            marginTop: '2rem'
        } }, React.createElement(UdpFluentTablist, { activeId: activeTab, appearance: "transparent", size: "small", orientation: "vertical", onTabChange: (e) => setActiveTab(e.detail), tabList: [
            { id: 'tab1', label: 'Tab 1 (Static)' },
            { id: 'tab2', label: 'Tab 2 (Lazy)' },
            { id: 'tab3', label: 'Tab 3 (Default Lazy)' }
        ] }), React.createElement("div", { style: { padding: '1rem', border: '1px solid #ccc' } }, React.createElement(UdpTabPanel, { id: "tab1", activeTabId: activeTab }, React.createElement("h3", null, "Dialog Example"), React.createElement(UdpFluentButton, { onClick: () => setDialogOpen(true) }, "Open Dialo"), React.createElement(UdpFluentDialog, { open: dialogOpen, title: "Example Dialog", onDialogClose: handleDialogClose }, React.createElement(UdpFluentButton, { slot: "action", onClick: handleDialogClose }, "Submi"), React.createElement("div", null, "This is a simple dialog example.")), React.createElement(UdpFluentMenu, { items: checkboxMenuItems, onClick: (item) => console.log(item), label: "Menu" })), React.createElement(UdpTabPanel, { id: "tab2", activeTabId: activeTab }, React.createElement(ClientSideUdpGrid, { columnDefs: [
            { field: 'make' },
            { field: 'model' },
            { field: 'price' }
        ], rowData: [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxster', price: 72000 }
        ] })), React.createElement(UdpTabPanel, { id: "tab3", activeTabId: activeTab }, React.createElement("h3", null, "Tab 3 Content (Default Lazy)"), React.createElement("p", null, "This content is lazy loaded by default."))))));
};
//# sourceMappingURL=TestStencilWrappedComponentsPage.js.map