import React, { useState } from 'react';
import { theme, ComponentsProvider, useConfig } from 'docz';
import 'codemirror/lib/codemirror.css';
import { config } from './config';
import { mq, breakpoints } from './styles/responsive';
import { Global } from './styles/global';
import { Main } from './components/shared';
import * as components from './components/ui';
import { ThemeProvider } from './components/ui/Playground/theme';

const map = {
    page: components.Page,
    loading: components.Loading,
    editor: components.Editor,
    h1: components.H1,
    h2: components.H2,
    h3: components.H3,
    h4: components.H4,
    h5: components.H5,
    h6: components.H6,
    hr: components.Hr,
    img: components.Image,
    playground: components.Playground,
    ul: components.List,
    pre: components.Pre,
    //inlineCode: components.Code,
    blockquote: components.Blockquote,
    inlineCode: components.InlineCode,
    props: components.Props,
};
export const CollapseContext = React.createContext<any>([]);
function Provider({ children }: any) {
    const [open, setOpen] = useState(true);
    return <CollapseContext.Provider value={[open, setOpen]}>{children}</CollapseContext.Provider>;
}
const Theme: React.FC = ({ children }) => {
    const config = useConfig();
    return (
        <Provider>
            <ThemeProvider theme={{ ...config.themeConfig, mq, breakpoints }}>
                <ComponentsProvider components={map}>
                    <Main>
                        <Global />
                        {children}
                    </Main>
                </ComponentsProvider>
            </ThemeProvider>
        </Provider>
    );
};

export default theme(config)(Theme);