import React from 'react'
import { GridProvider } from '../context/grid-context'
import { useGrid } from '../hooks'

export type GridStoriesProviderProps = {
    children: React.ReactNode
}

/**
 * An internal-only component used for adding
 * decorators to Storybook stories where a grid context
 * is required.
 */
export const GridStoriesProvider = ({ children }: GridStoriesProviderProps) => {
    const state = useGrid()

    const [initialized, setInitialized] = React.useState(false)

    React.useEffect(() => {
        if (!initialized) {
            state.dispatch({
                type: 'applyProps',
                payload: {
                    columns: [
                        {
                            id: 'columnOne',
                            label: 'Column Label',
                        },
                    ],
                    rows: [],
                    sort: [{ columnId: 'columnOne', direction: 'asc' }],
                    actionsMenuPresent: false,
                    footerEnabled: false,
                    rowDrag: {
                        enabled: false,
                    },
                },
            })
            setInitialized(true)
        }
    }, [state, initialized])

    return <GridProvider {...state}>{children}</GridProvider>
}