import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Divider, InputNumber, Spin } from 'antd';
import Text from 'antd/lib/typography/Text';
import { useState } from 'react';
import Axes from '../Pivot/Axes';
import Options from '../Pivot/Options';
import OrderGroup from '../Order/OrderGroup';
import { ButtonDropdown } from '../../QueryBuilder/ButtonDropdown';
import styled from 'styled-components';
const PivotPopover = styled.div `
  background: #fff;
  width: 450px;
`;
export default function Settings({ pivotConfig, orderMembers, limit: initialLimit, disabled, onMove, onUpdate, onReorder, onOrderChange, isQueryPresent, }) {
    const [pivotShown, setPivotShown] = useState(false);
    const [orderShown, setOrderShown] = useState(false);
    const [limitShown, setLimitShown] = useState(false);
    const [limit, setLimit] = useState(initialLimit);
    return (_jsxs(_Fragment, { children: [_jsx(Text, { style: { lineHeight: '32px' }, children: "Settings:" }), _jsx(ButtonDropdown, { show: pivotShown, disabled: !isQueryPresent || disabled, style: { border: 0 }, overlay: pivotConfig === null ? (_jsx(Spin, {})) : (_jsxs(PivotPopover, { "data-testid": "pivot-popover", children: [_jsx(Axes, { pivotConfig: pivotConfig, onMove: onMove }), _jsx(Divider, { style: { margin: 0 } }), _jsx("div", { style: { padding: '8px' }, children: _jsx(Options, { pivotConfig: pivotConfig, onUpdate: onUpdate }) })] })), onOverlayOpen: () => setPivotShown(true), onOverlayClose: () => setPivotShown(false), children: "Pivot" }), _jsx(ButtonDropdown, { "data-testid": "order-btn", show: orderShown, disabled: !isQueryPresent || disabled, style: { border: 0 }, overlay: _jsx("div", { style: {
                        padding: '8px',
                        paddingBottom: 1,
                        width: 400,
                        backgroundColor: '#fff',
                    }, children: _jsx(OrderGroup, { orderMembers: orderMembers, onReorder: onReorder, onOrderChange: onOrderChange }) }), onOverlayOpen: () => setOrderShown(true), onOverlayClose: () => setOrderShown(false), children: "Order" }), _jsx(ButtonDropdown, { "data-testid": "limit-btn", show: limitShown, disabled: !isQueryPresent || disabled, style: { border: 0 }, overlay: _jsx("div", { style: {
                        padding: '8px',
                        background: 'white',
                    }, children: _jsx("label", { children: _jsx(InputNumber, { prefix: "Limit", type: "number", value: limit, step: 500, min: 0, onChange: setLimit, onPressEnter: () => {
                                onUpdate({ limit });
                                setLimitShown(false);
                            } }) }) }), onOverlayOpen: () => setLimitShown(true), onOverlayClose: () => setLimitShown(false), children: "Limit" })] }));
}
//# sourceMappingURL=Settings.js.map