import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { TimeoutSlider } from './timeout-slider.js';
const meta = {
    title: 'Features/Settings/TimeoutSlider',
    component: TimeoutSlider,
};
export default meta;
function TimeoutSliderDemo({ label = 'Analyze', defaultSeconds = 1800, }) {
    const [value, setValue] = useState(String(defaultSeconds));
    return (_jsx("div", { style: { maxWidth: 500 }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }, children: [_jsx("span", { style: { fontSize: 14 }, children: label }), _jsx(TimeoutSlider, { id: "demo-slider", testId: "demo-slider-input", value: value, onChange: setValue, onBlur: () => undefined, defaultSeconds: defaultSeconds })] }) }));
}
export const Default = {
    render: () => _jsx(TimeoutSliderDemo, {}),
};
export const ShortTimeout = {
    render: () => _jsx(TimeoutSliderDemo, { label: "Analyze Repo", defaultSeconds: 600 }),
};
export const LongTimeout = {
    render: () => _jsx(TimeoutSliderDemo, { label: "Implement", defaultSeconds: 5400 }),
};
export const AllStages = {
    render: () => (_jsxs("div", { style: { maxWidth: 500, display: 'flex', flexDirection: 'column', gap: 16 }, children: [_jsx(TimeoutSliderDemo, { label: "Analyze", defaultSeconds: 1800 }), _jsx(TimeoutSliderDemo, { label: "Requirements", defaultSeconds: 1800 }), _jsx(TimeoutSliderDemo, { label: "Research", defaultSeconds: 1800 }), _jsx(TimeoutSliderDemo, { label: "Plan", defaultSeconds: 1800 }), _jsx(TimeoutSliderDemo, { label: "Implement", defaultSeconds: 1800 }), _jsx(TimeoutSliderDemo, { label: "Merge", defaultSeconds: 1800 })] })),
};
