"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.withControls = exports.readonly = exports.disabled = exports.error = exports.minMaxAndStep = exports.step = exports.minAndMax = exports.max = exports.min = exports.defaultState = void 0;
const react_1 = __importStar(require("react"));
const addon_knobs_1 = require("@storybook/addon-knobs");
const storybook_utilities_1 = require("../../storybook-utilities");
const BlockStack_1 = require("../BlockStack");
const InlineStack_1 = require("../InlineStack");
const Text_1 = require("../Text");
const Divider_1 = require("../Divider");
const Stepper_1 = require("./Stepper");
const meta = {
    component: Stepper_1.Stepper,
    title: 'checkout-web-ui/Stepper',
    decorators: [
        addon_knobs_1.withKnobs,
        storybook_utilities_1.themeWithKnobs('stepper', 'textFields', 'primaryButton'),
        (story) => (<div style={{
            padding: '1em',
        }}>
        {story()}
      </div>),
    ],
};
exports.default = meta;
const defaultProps = {
    label: 'Quantity',
};
exports.defaultState = () => <Stepper_1.Stepper {...defaultProps}/>;
exports.min = () => <Stepper_1.Stepper {...defaultProps} min={3}/>;
exports.max = () => <Stepper_1.Stepper {...defaultProps} max={5}/>;
exports.minAndMax = () => <Stepper_1.Stepper {...defaultProps} min={1} max={5}/>;
exports.step = () => <Stepper_1.Stepper {...defaultProps} step={0.5}/>;
exports.minMaxAndStep = () => (<Stepper_1.Stepper {...defaultProps} step={2} min={0} max={5}/>);
exports.error = () => <Stepper_1.Stepper {...defaultProps} error="Limit reached"/>;
exports.disabled = () => <Stepper_1.Stepper {...defaultProps} disabled/>;
exports.readonly = () => <Stepper_1.Stepper {...defaultProps} value={10} readonly/>;
function StepperWithState(props) {
    const [value, setValue] = react_1.useState(1);
    const [value1, setValue1] = react_1.useState(0);
    const [error, setError] = react_1.useState(undefined);
    const max = 10;
    const handleChange = (val) => {
        setValue(Number(val));
    };
    const handleMaxValueChange = (value) => {
        const numVal = Number(value);
        if (max && numVal > max) {
            setError('Value exceeds max');
            return;
        }
        if (numVal < 0) {
            setError('Value less than min');
            return;
        }
        setValue1(numVal);
        setError(undefined);
    };
    return (<BlockStack_1.BlockStack>
      <Stepper_1.Stepper {...props} value={value} onChange={handleChange}/>
      <BlockStack_1.BlockStack spacing="extraTight">
        <InlineStack_1.InlineStack>
          <Text_1.Text>onChange value: </Text_1.Text>
          <Text_1.Text subdued>{value}</Text_1.Text>
        </InlineStack_1.InlineStack>
      </BlockStack_1.BlockStack>
      <Divider_1.Divider />
      <Text_1.Text>With error when max of 10 exceeded</Text_1.Text>
      <Stepper_1.Stepper {...defaultProps} max={max} value={value1} onChange={handleMaxValueChange} error={error}/>
      <InlineStack_1.InlineStack>
        <Text_1.Text>onChange value: </Text_1.Text>
        <Text_1.Text subdued>{value1}</Text_1.Text>
      </InlineStack_1.InlineStack>
    </BlockStack_1.BlockStack>);
}
exports.withControls = (props) => <StepperWithState {...props}/>;
exports.withControls.args = {
    accessibilityDescription: 'Number of sprockets',
    disabled: false,
    error: '',
    label: 'Quantity',
    min: undefined,
    max: undefined,
    readonly: false,
    spinner: true,
    step: undefined,
};