import type { Meta, StoryFn } from '@storybook/vue3-vite';
import { useToastNotification, ToastContainer } from '@/UI-kit/components/UI/toaster/UIToaster';
import { UIButton } from '@/index';
import { computed } from 'vue';

const meta: Meta = {
    title: 'UI/UIToaster',
    tags: ['autodocs'],
    argTypes: {
        message: {
            control: 'text',
            description: 'Toast message content',
            defaultValue: 'Notification message',
        },
        type: {
            control: { type: 'select' },
            options: ['default', 'success', 'error', 'warning', 'info'],
            defaultValue: 'default',
        },

        timeout: {
            control: { type: 'number', min: 1000, max: 10000, step: 500 },
            defaultValue: 3000,
        },
        position: {
            control: { type: 'select' },
            options: [
                'top-right',
                'top-center',
                'top-left',
                'bottom-right',
                'bottom-center',
                'bottom-left',
            ],
            defaultValue: 'top-center',
        },
        hideProgressBar: {
            control: 'boolean',
            defaultValue: true,
        },
        closeOnClick: {
            control: 'boolean',
            defaultValue: true,
        },
        draggable: {
            control: 'boolean',
            defaultValue: true,
        },
        icon: {
            control: 'boolean',
            defaultValue: false,
        },
        showCloseButtonOnHover: {
            control: 'boolean',
            defaultValue: false,
        },
    },
} as Meta;

export default meta;

const Template: StoryFn = (args) => ({
    components: { ToastContainer, UIButton },
    setup() {
        const { customToast, successToast, errorToast, warningToast, infoToast } =
            useToastNotification();

        const defaultUsage = {
            success: "successToast('Success message!')",
            error: "errorToast('Error message!')",
            warning: "warningToast('Warning message!')",
            info: "infoToast('Info message!')",
        };

        const showCustomToast = () => {
            customToast({
                message: args.message,
                type: args.type,
                options: {
                    timeout: args.timeout,
                    position: args.position,
                    hideProgressBar: args.hideProgressBar,
                    closeOnClick: args.closeOnClick,
                    draggable: args.draggable,
                    icon: args.icon,
                    showCloseButtonOnHover: args.showCloseButtonOnHover,
                },
            });
        };

        const currentSettings = computed(() => ({
            message: args.message,
            type: args.type,
            options: {
                timeout: args.timeout,
                position: args.position,
                hideProgressBar: args.hideProgressBar,
                closeOnClick: args.closeOnClick,
                draggable: args.draggable,
                icon: args.icon,
                showCloseButtonOnHover: args.showCloseButtonOnHover,
            },
        }));

        return {
            args,
            defaultUsage,
            showCustomToast,
            successToast,
            errorToast,
            warningToast,
            infoToast,
            currentSettings,
        };
    },
    template: `
        <div style="display: flex; flex-direction: column; gap: 16px;">
            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                <UIButton @click="successToast('Success operation!')" type="success">Default Success</UIButton>
                <UIButton @click="errorToast('Error occurred!')" type="danger">Default Error</UIButton>
                <UIButton @click="warningToast('Warning message!')" type="warning">Default Warning</UIButton>
                <UIButton @click="infoToast('Information message')" type="info">Default Info</UIButton>
            </div>

            <div style="margin-top: 20px; padding: 12px; background: #f5f5f5; border-radius: 4px;">
                <h4 style="margin-top: 0;">Default Toasts Usage:</h4>
                <pre>{{ JSON.stringify(defaultUsage, null, 2) }}</pre>
            </div>

            <div style="border-top: 1px dashed #ddd; padding-top: 16px;">
                <h3 style="margin-bottom: 12px;">Custom Toast with Controls</h3>
                <UIButton @click="showCustomToast" type="primary">Show Custom Toast</UIButton>
            </div>

            <ToastContainer />

            <div style="margin-top: 20px; padding: 12px; background: #f5f5f5; border-radius: 4px;">
                <h4 style="margin-top: 0;">Current Custom Settings:</h4>
                <pre>{{ JSON.stringify(currentSettings, null, 2) }}</pre>
            </div>
        </div>
    `,
});

export const DefaultUsage = Template.bind({});
DefaultUsage.args = {};
