import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { num } from '@data-wrangling-components/utilities';
import { Position, SpinButton } from '@fluentui/react';
import { format } from 'd3-format';
import { memo } from 'react';
import { useSpinButtonChangeHandler } from '../hooks/index.js';
import { LeftAlignedRow } from '../styles.js';
import { Container, Or, spinStyles } from './Sample.styles.js';
const whole = format('d');
/**
 * Provides inputs for a Sample step.
 */ export const Sample = /*#__PURE__*/ memo(function Sample({ step , onChange  }) {
    const handleSizeChange = useSpinButtonChangeHandler(step, (s, val)=>s.args.size = num(val), onChange);
    const handlePercentChange = useSpinButtonChangeHandler(step, (s, val)=>{
        s.args.proportion = val != null ? +val / 100 : undefined;
    }, onChange);
    return /*#__PURE__*/ _jsx(Container, {
        children: /*#__PURE__*/ _jsxs(LeftAlignedRow, {
            children: [
                /*#__PURE__*/ _jsx(SpinButton, {
                    label: 'Number of rows',
                    labelPosition: Position.top,
                    min: 0,
                    step: 1,
                    disabled: !!step.args.proportion,
                    value: step.args.size ? `${step.args.size}` : '',
                    styles: spinStyles,
                    onChange: handleSizeChange
                }),
                /*#__PURE__*/ _jsx(Or, {
                    children: "or"
                }),
                /*#__PURE__*/ _jsx(SpinButton, {
                    label: 'Row percentage',
                    labelPosition: Position.top,
                    min: 0,
                    max: 100,
                    step: 1,
                    disabled: !!step.args.size,
                    value: step.args.proportion ? `${whole(step.args.proportion * 100)}` : '',
                    styles: spinStyles,
                    onChange: handlePercentChange
                })
            ]
        })
    });
});
