import * as React from 'react';
import { ThemeProvider as StyledThemeProvider } from 'styled-components';
import { useConfig } from 'docz';
import getter from 'lodash/get';
import * as colors from '../../../styles/colors';

export const light = {
    ...colors,
    primary: colors.blue,
    text: colors.grayDark,
    link: colors.blue,
    footerText: colors.grayDark,
    sidebarBg: colors.grayExtraLight,
    sidebarText: colors.dark,
    sidebarHighlight: null,
    sidebarBorder: colors.grayLight,
    background: colors.white,
    border: colors.grayLight,
    theadColor: colors.gray,
    theadBg: colors.grayExtraLight,
    tableColor: colors.dark,
    tooltipBg: colors.dark,
    tooltipColor: colors.grayExtraLight,
    codeBg: colors.grayExtraLight,
    codeColor: colors.gray,
    preBg: colors.grayExtraLight,
    blockquoteBg: colors.grayExtraLight,
    blockquoteBorder: colors.grayLight,
    blockquoteColor: colors.gray,
    propsText: colors.gray,
    propsBg: colors.grayUltraLight,
};

export const get = (val: string, defaultValue?: any) => (p: any) => getter(p, `theme.${val}`, defaultValue);

export const ThemeProvider: React.FC<any> = ({ children, theme }) => {
    const config = useConfig();
    const next = (prev: any) => {
        return {
            ...prev,
            ...theme,
            ...config.themeConfig,
            ...{ colors: light, codemirrorTheme: 'docz-light', mode: 'light' },
        };
    };
    return (
        <StyledThemeProvider theme={next}>
            <React.Fragment>{children}</React.Fragment>
        </StyledThemeProvider>
    );
};