import { Box, Checkbox, CustomModalLayout, FormField, Input, Text, } from '@wix/design-system';
import React, { useState } from 'react';
import _ from 'lodash';
const features = {
    initialError: '',
    refreshError: '',
    fetchNextPageError: '',
    fetchTranslationsError: '',
    groupType: [
        { key: 'views', value: 'Views' },
        { key: 'tabs', value: 'Tabs' },
    ],
    addNew: 'Add New Item',
    bulkActions: 'Bulk Actions',
    customColumns: 'Custom Columns',
    dnd: 'Drag & Drop',
    filters: 'Filters',
    advancedSorting: 'Advanced Sorting',
    limit: 'Limit',
};
export const SettingsModalLayout = (props) => {
    const { ok, cancel, preferences: oldPreferences, ...rest } = props;
    const [preferences, setPreferences] = useState({ ...oldPreferences });
    return (React.createElement(CustomModalLayout, { primaryButtonText: "Save", primaryButtonOnClick: () => {
            ok(preferences);
        }, secondaryButtonOnClick: () => cancel(), onCloseButtonClick: () => cancel(), secondaryButtonText: "Cancel", title: "Demo Settings", ...rest },
        React.createElement(Box, { gap: "SP3", direction: "vertical" },
            React.createElement(Box, { direction: "vertical", gap: "SP2", paddingBottom: "SP3" },
                React.createElement(Text, null, "Features:"),
                _.reduce(features, (acc, value, key) => {
                    const feature = key;
                    if (_.isArray(value)) {
                        return _.concat(acc, value.map((option) => (React.createElement(Checkbox, { key: option.key, checked: preferences[feature] === option.key, onChange: () => setPreferences({
                                ...preferences,
                                [key]: preferences[feature] !== option.key
                                    ? option.key
                                    : undefined,
                            }) }, option.value))));
                    }
                    if (typeof preferences[feature] === 'number') {
                        acc.push(React.createElement(FormField, { key: key, label: value },
                            React.createElement(Input, { key: key, value: preferences[feature], onChange: (e) => {
                                    const { value: newValue } = e.target;
                                    setPreferences({
                                        ...preferences,
                                        [key]: newValue ? parseInt(newValue, 10) : 10,
                                    });
                                } })));
                        return acc;
                    }
                    acc.push(React.createElement(Checkbox, { key: key, checked: !!preferences[feature], onChange: () => setPreferences({
                            ...preferences,
                            [key]: !preferences[feature],
                        }) }, value || _.startCase(key)));
                    return acc;
                }, [])))));
};
//# sourceMappingURL=SettingsModalLayout.js.map