import React from 'react';
import { Box, Dropdown, listItemSectionBuilder, listItemSelectBuilder, FormField, } from '@wix/design-system';
import { getFieldTypeIcon } from '../../../utils/fieldTypePrefixIcons';
const OPTIONS = [
    listItemSectionBuilder({
        title: 'Essentials',
        id: 'section-essentials',
        type: 'subheader',
    }),
    listItemSelectBuilder({
        id: 'SHORT_TEXT',
        title: 'Text',
        label: 'Text',
        prefix: (React.createElement(Box, null, getFieldTypeIcon({ fieldType: 'SHORT_TEXT', size: 'medium' }))),
    }),
    listItemSelectBuilder({
        id: 'NUMBER',
        title: 'Number',
        label: 'Number',
        prefix: (React.createElement(Box, null, getFieldTypeIcon({ fieldType: 'NUMBER', size: 'medium' }))),
    }),
    listItemSelectBuilder({
        id: 'BOOLEAN',
        title: 'Boolean',
        label: 'Boolean',
        prefix: (React.createElement(Box, null, getFieldTypeIcon({ fieldType: 'BOOLEAN', size: 'medium' }))),
    }),
    listItemSelectBuilder({
        id: 'DATE',
        title: 'Date',
        label: 'Date',
        prefix: (React.createElement(Box, null, getFieldTypeIcon({ fieldType: 'DATE', size: 'medium' }))),
    }),
];
export const FieldTypeSelect = ({ label, value, onChange, disabled, error, }) => (React.createElement(FormField, { required: true, stretchContent: true, label: label, status: error ? 'error' : undefined, statusMessage: error },
    React.createElement(Dropdown, { popoverProps: { zIndex: 10000, appendTo: 'window' }, placeholder: "Choose a type", valueParser: (option) => option.label, prefix: value
            ? getFieldTypeIcon({ fieldType: value, size: 'medium' })
            : undefined, options: OPTIONS, selectedId: value, onSelect: (option) => onChange(option.id), disabled: disabled })));
//# sourceMappingURL=FieldTypeSelect.js.map