import type { Meta, StoryObj } from '@storybook/react';
import { VolumeControl } from './VolumeControl';
import { useState } from 'react';

const meta = {
    title: 'Components/Features/Player/Components/VolumeControl',
    component: VolumeControl,
    tags: ['autodocs'],
    argTypes: {
        volume: { control: { type: 'range', min: 0, max: 100 } },
        muted: { control: 'boolean' },
        disabled: { control: 'boolean' },
        showValue: { control: 'boolean' },
        showSlider: { control: 'boolean' },
    },
    decorators: [
        (Story) => (
            <div className="p-4 w-64 bg-kodo-graphite rounded-lg">
                <Story />
            </div>
        ),
    ],
} satisfies Meta<typeof VolumeControl>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
    render: (args) => {
        const [volume, setVolume] = useState(50);
        const [muted, setMuted] = useState(false);

        return (
            <VolumeControl
                {...args}
                volume={volume}
                muted={muted}
                onVolumeChange={setVolume}
                onMuteToggle={() => setMuted(!muted)}
            />
        );
    },
};

export const Muted: Story = {
    render: (args) => {
        const [volume, setVolume] = useState(50);
        const [muted, setMuted] = useState(true);

        return (
            <VolumeControl
                {...args}
                volume={volume}
                muted={muted}
                onVolumeChange={setVolume}
                onMuteToggle={() => setMuted(!muted)}
            />
        );
    },
};

export const Disabled: Story = {
    args: {
        volume: 30,
        muted: false,
        disabled: true,
    },
};

export const WithValue: Story = {
    render: (args) => {
        const [volume, setVolume] = useState(75);
        const [muted, setMuted] = useState(false);

        return (
            <VolumeControl
                {...args}
                volume={volume}
                muted={muted}
                showValue={true}
                onVolumeChange={setVolume}
                onMuteToggle={() => setMuted(!muted)}
            />
        );
    },
};