import { ThreekitProvider, TrebleApp } from '@threekit-tools/treble';
import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import useImage from '../../hooks/useImage';
import { SelectJeep } from '../../pages/SelectJeep/SelectJeep';
import { assetID } from '../../utils/constants';
import { ProductComponent } from '../ProductComponent/ProductComponent';

// export default function Configurator() {
//   const { pathname } = useLocation();
//   const { loading, error, image } = useImage('1.jpg');
//   useEffect(() => {
//     console.log('pathname: ', pathname);
//   }, [pathname]);

//   return (
//     <>
//       {pathname === '/' ? (
//         <SelectJeep />
//       ) : (
//         <TrebleApp productId={'Jeep2DoorJL'} />
//       )}
//     </>
//   );
// }

export default function Configurator({ ...props }) {
  const { publicToken, orgId, assetId, threekitEnviroment, shortId } =
    props.configSettings;
  const projects = {
    credentials: {
      preview: {
        //  These credentials are just examples and DO NOT
        //  point to a real org
        publicToken,
        orgId,
      },
    },
    products: {
      preview: {
        assetId,
      },
    },
  };

  const playerConfig = {};

  const threekitEnv = threekitEnviroment;

  return (
    <>
      <ThreekitProvider
        project={projects}
        threekitEnv={threekitEnv}
        playerConfig={playerConfig}
      >
        <ProductComponent
          ReturnToMainPage={props.ReturnToMainPage}
          returnCartInfo={props.returnCartInfo}
          customSettings={props.customSettings}
          configSettings={props.configSettings}
          shortId={shortId}
        />
      </ThreekitProvider>
    </>
  );
}