import { useState } from 'react';
import { Flex, Link, Slider } from '@pega/cosmos-react-core';
export default {
    title: 'Core/Slider',
    component: Slider
};
export const SliderDemo = (args) => {
    const [value, setValue] = useState(args.value || 0);
    let ticksObject = args.ticks;
    if (args.max > args.min && !ticksObject) {
        ticksObject = {};
        const numTicks = Math.floor((args.max - args.min) / (args.step || 1)) + 1;
        Array(numTicks)
            .fill(0)
            .map((_, index) => args.min + index * args.step)
            .forEach(tick => {
            ticksObject[tick] = tick.toString();
        });
    }
    return (<Slider orientation={args.orientation} step={args.step} min={args.min} max={args.max} ticks={ticksObject} showProgress={args.showProgress} preview={args.preview} showInput={args.showInput} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} value={value} onChange={(changeValue) => setValue(changeValue)} additionalInfo={args.showAdditionalInfo
            ? {
                content: (<Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore
                    magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent
                    semper feugiat nibh sed pulvinar proin gravida.
                  </p>
                  <p>
                    Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit
                    egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim nulla
                    aliquet porttitor lacus.
                  </p>
                  <Link href='/' target='_blank'>
                    Neque vitae
                  </Link>
                </Flex>)
            }
            : undefined}/>);
};
SliderDemo.args = {
    orientation: 'vertical',
    step: 1,
    min: 0,
    max: 10,
    value: 5,
    ticks: undefined,
    showProgress: true,
    preview: false,
    showInput: true,
    label: 'Slider input',
    labelHidden: false,
    info: 'Pick a value',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false,
    showAdditionalInfo: false
};
SliderDemo.argTypes = {
    orientation: { options: ['vertical', 'horizontal'], control: { type: 'inline-radio' } },
    step: { control: { type: 'number' } },
    min: { control: { type: 'number' } },
    max: { control: { type: 'number' } },
    value: { control: { type: 'number' } },
    ticks: { control: { type: 'object' } },
    showProgress: { control: { type: 'boolean' } },
    preview: { control: { type: 'boolean' } },
    showInput: { control: { type: 'boolean' } },
    label: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    required: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    readOnly: { control: { type: 'boolean' } },
    showAdditionalInfo: { control: { type: 'boolean' } }
};
//# sourceMappingURL=Slider.stories.jsx.map