<script module>
import { createTypographyControl } from '$shared/lib';
import { defineMeta } from '@storybook/addon-svelte-csf';
import ComboControlV2 from './ComboControlV2.svelte';

const { Story } = defineMeta({
    title: 'Shared/ComboControlV2',
    component: ComboControlV2,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'ComboControl with input field and slider. Simplified version without increase/decrease buttons.',
            },
            story: { inline: false }, // Render stories in iframe for state isolation
        },
    },
    argTypes: {
        orientation: {
            control: 'select',
            options: ['horizontal', 'vertical'],
            description: 'Orientation of the ComboControl',
            defaultValue: 'vertical',
        },
        label: {
            control: 'text',
            description: 'Label for the ComboControl',
        },
        control: {
            control: 'object',
            description: 'TypographyControl instance managing the value and bounds',
        },
    },
});
</script>

<script lang="ts">
const horizontalControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
const verticalControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
const floatControl = createTypographyControl({ min: 0, max: 1, step: 0.01, value: 0.5 });
const atMinControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 0 });
const atMaxControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 100 });
const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10, value: 500 });
</script>

<Story
    name="Horizontal"
    args={{
        control: horizontalControl,
        orientation: 'horizontal',
        label: 'Size',
    }}
>
    <ComboControlV2 control={horizontalControl} orientation="horizontal" label="Size" />
</Story>

<Story
    name="Vertical"
    args={{
        control: verticalControl,
        orientation: 'vertical',
        label: 'Size',
    }}
>
    <ComboControlV2 control={verticalControl} orientation="vertical" class="h-48" label="Size" />
</Story>

<Story
    name="With Float Values"
    args={{
        control: floatControl,
        orientation: 'vertical',
        label: 'Opacity',
    }}
>
    <ComboControlV2 control={floatControl} orientation="vertical" class="h-48" label="Opacity" />
</Story>

<Story
    name="At Minimum"
    args={{
        control: atMinControl,
        orientation: 'horizontal',
        label: 'Size',
    }}
>
    <ComboControlV2 control={atMinControl} orientation="horizontal" label="Size" />
</Story>

<Story
    name="At Maximum"
    args={{
        control: atMaxControl,
        orientation: 'horizontal',
        label: 'Size',
    }}
>
    <ComboControlV2 control={atMaxControl} orientation="horizontal" label="Size" />
</Story>

<Story
    name="Large Range"
    args={{
        control: largeRangeControl,
        orientation: 'horizontal',
        label: 'Scale',
    }}
>
    <ComboControlV2 control={largeRangeControl} orientation="horizontal" label="Scale" />
</Story>
