import React, { useEffect } from 'react';
import CategorySidebar from '../CategorySidebar';
import { productFiltersMock } from '../../../../mocks/product/productFilters';
import { getArgTypes, getArgs } from '../../../tools/controlsHelper';
import { initializeStores } from './StoriesInitializer';

// Initialize the stores for the stories
initializeStores();

export default {
    title: 'Components/Category Sidebar',
    component: CategorySidebar,
    argTypes: getArgTypes(CategorySidebar.schema().form)
};

const StoryWrapper = ({ children }) => {
    // Ensure stores are initialized on every story render
    useEffect(() => {
        initializeStores();
    }, []);

    return children;
};

export const Default = {
    render: args => (
        <StoryWrapper>
            <CategorySidebar
                data={{
                    items: productFiltersMock.items,
                    i18n: productFiltersMock.i18n
                }}
                settings={args}
            />
        </StoryWrapper>
    ),
    args: getArgs(CategorySidebar.schema().form)
};

export const WithSettings = {
    render: args => (
        <StoryWrapper>
            <CategorySidebar settings={args} />
        </StoryWrapper>
    ),
    args: getArgs(CategorySidebar.schema().form)
};
