import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createDispatchHook, createSelectorHook } from 'react-redux';
import store from './store/store';
import './index.css';
import Configurator from './mainComponents/Configurator/Configurator';
import { SelectJeep } from './pages/SelectJeep/SelectJeep';
//@ts-ignore
const store1Context = React.createContext();
//@ts-ignore

export const useStoreDispatch = createDispatchHook(store1Context);
//@ts-ignore

export const useStoreSelector = createSelectorHook(store1Context);

export const ConfiguratorApp = ({ ...props }: any) => {
  console.log('props123: ', props);
  const { configSettings, ReturnToMainPage, returnCartInfo, customSettings } =
    props;

  return (
    //@ts-ignore
    <Provider store={store} context={store1Context}>
      {/* <Router> */}
      <Configurator
        configSettings={configSettings}
        ReturnToMainPage={ReturnToMainPage}
        returnCartInfo={returnCartInfo}
        customSettings={customSettings}
      />
      {/* </Router> */}
    </Provider>
  );
};

export const MainPage = ({ ...props }: any) => {
  const { OpenJeep2DoorJL, OpenJeep4DoorJL, OpenJeepGladiator } = props;

  return (
    <SelectJeep
      OpenJeep2DoorJL={OpenJeep2DoorJL}
      OpenJeep4DoorJL={OpenJeep4DoorJL}
      OpenJeepGladiator={OpenJeepGladiator}
    />
  );
};