import type { Meta, StoryObj } from '@storybook/react';
import { ConfirmationDialog } from './confirmation-dialog';
import { Button } from './button';
import { useState } from 'react';

const meta = {
    title: 'UI/ConfirmationDialog',
    component: ConfirmationDialog,
    tags: ['autodocs'],
    argTypes: {
        variant: {
            control: 'radio',
            options: ['default', 'destructive'],
        },
        isLoading: { control: 'boolean' },
    },
} satisfies Meta<typeof ConfirmationDialog>;

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

export const Destructive: Story = {
    render: (args) => {
        const [open, setOpen] = useState(false);
        return (
            <>
                <Button variant="destructive" onClick={() => setOpen(true)}>Delete Account</Button>
                <ConfirmationDialog
                    {...args}
                    open={open}
                    onClose={() => setOpen(false)}
                    onConfirm={() => {
                        alert('Confirmed!');
                        setOpen(false);
                    }}
                    title="Delete Account"
                    description="Are you sure? This action cannot be undone."
                    confirmLabel="Delete"
                    variant="destructive"
                />
            </>
        );
    },
};

export const Standard: Story = {
    render: (args) => {
        const [open, setOpen] = useState(false);
        return (
            <>
                <Button variant="outline" onClick={() => setOpen(true)}>Publish Post</Button>
                <ConfirmationDialog
                    {...args}
                    open={open}
                    onClose={() => setOpen(false)}
                    onConfirm={() => setOpen(false)}
                    title="Publish Post"
                    description="Do you want to publish this post now?"
                    confirmLabel="Publish"
                    variant="default"
                />
            </>
        );
    },
};