<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

const { Story } = defineMeta({
    title: 'Shared/UI/ComboControl',
    component: ComboControl,
    tags: ['autodocs'],
    argTypes: {
        value: { control: 'number' },
        minValue: { control: 'number' },
        maxValue: { control: 'number' },
        step: { control: 'number' },
        increaseDisabled: { control: 'boolean' },
        decreaseDisabled: { control: 'boolean' },
        onChange: { action: 'onChange' },
        onIncrease: { action: 'onIncrease' },
        onDecrease: { action: 'onDecrease' },
    },
});
</script>

<script lang="ts">
import ComboControl from './ComboControl.svelte';

let integerStep = 1;
let decimalStep = 0.05;

let integerValue = 16;
let decimalValue = 1.5;

let integerMinValue = 8;
let decimalMinValue = 1;

let integerMaxValue = 100;
let decimalMaxValue = 2;

function onChange() {}
function onIncrease() {}
function onDecrease() {}
</script>

<Story name="Integer Step">
    <ComboControl
        value={integerValue}
        step={integerStep}
        onChange={onChange}
        onIncrease={onIncrease}
        onDecrease={onDecrease}
        minValue={integerMinValue}
        maxValue={integerMaxValue}
    />
</Story>

<Story name="Decimal Step">
    <ComboControl
        value={decimalValue}
        step={decimalStep}
        onChange={onChange}
        onIncrease={onIncrease}
        onDecrease={onDecrease}
        minValue={decimalMinValue}
        maxValue={decimalMaxValue}
    />
</Story>
