import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useState } from 'react';
import { Box, FormControl, TextInputWithTokens, Autocomplete, Select, Textarea, Heading, } from '@primer/react';
export const FormMock = (props) => {
    const { title } = props;
    const [tokens, setTokens] = useState([
        { text: 'zero', id: '0' },
        { text: 'one', id: '1' },
        { text: 'two', id: '2' },
    ]);
    const onTokenRemove = tokenId => {
        setTokens(tokens.filter(token => token.id !== tokenId));
    };
    return (_jsxs(Box, { display: "grid", sx: { gap: 3 }, children: [_jsx(Heading, { children: title }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "TextInputWithTokens" }), _jsx(TextInputWithTokens, { onTokenRemove: onTokenRemove, tokens: tokens })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Autocomplete" }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { block: true }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { items: [
                                        { text: 'css', id: '0' },
                                        { text: 'css-in-js', id: '1' },
                                        { text: 'styled-system', id: '2' },
                                        { text: 'javascript', id: '3' },
                                        { text: 'typescript', id: '4' },
                                        { text: 'react', id: '5' },
                                        { text: 'design-systems', id: '6' },
                                    ], selectedItemIds: [], "aria-labelledby": "" }) })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Select" }), _jsxs(Select, { children: [_jsx(Select.Option, { value: "figma", children: "Figma" }), _jsx(Select.Option, { value: "css", children: "Primer CSS" }), _jsx(Select.Option, { value: "prc", children: "Primer React components" }), _jsx(Select.Option, { value: "pvc", children: "Primer ViewComponents" })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Textarea" }), _jsx(Textarea, {})] })] }));
};
export default FormMock;
