import React from 'react';
import {ThemeProvider as OriginalThemeProvider} from 'styled-components';
import {ConfigProvider} from 'antd';
import {useThemeSlice} from "./slice";
import {useSelector} from "react-redux";
import {selectAntdThemeConfig, selectMergeTheme} from "./slice/selectors";

export const ThemeProvider = (props) => {
  useThemeSlice();

  const theme = useSelector(selectAntdThemeConfig);
  const themeToken = useSelector(selectMergeTheme);
  return (
    <ConfigProvider theme={theme}>
      <OriginalThemeProvider theme={themeToken}>
        {/* eslint-disable-next-line react/prop-types */}
        {React.Children.only(props.children)}
      </OriginalThemeProvider>
    </ConfigProvider>
  )

};

