import {
  useProductCache,
  useThreekitInitStatus,
} from '@threekit-tools/treble/dist';
import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { useStoreDispatch, useStoreSelector } from '../../App';
import { SetAttributes, SetModal } from '../../store/actions/Settings';
import { getConfigInfo } from '../../store/selectors/selectors';
import { assetID, cameraPositions } from '../../utils/constants';
import { Interface } from '../Interface/Interface';
import { ModalState } from '../modals/ModalState/ModalState';
import PlayerComponent from '../PlayerComponent/PlayerComponent';
import s from './ProductComponent.module.scss';

export const ProductComponent = ({ ...props }) => {
  const {
    ReturnToMainPage,
    returnCartInfo,
    customSettings,
    shortId,
    configSettings,
  } = props;
  // const [{ cache, products }, handleLoadProduct] = useProductCache();
  const [checkLoadConfig, setCheckLoadConfig] = useState(false);
  const [newSceneIsSet, setNewSceneIsSet] = useState(false); // need to set false!!!
  const hasLoaded = useThreekitInitStatus();
  const dispatch = useStoreDispatch();

  const configInfo = useStoreSelector(getConfigInfo);
  const { pathname }: any = useLocation();
  console.log('shortId111: ', shortId);
  useEffect(() => {
    if (shortId) {
      setCheckLoadConfig(shortId);
    }
  }, [shortId]);

  useEffect(() => {
    // loadCurrentScene();
    dispatch(
      SetModal({
        list: { loader: true },
        info: { text: 'Personalising you experience...' },
      })
    );
    if (hasLoaded) {
      getActualAttr();
      setTimeout(() => {
        setNewSceneIsSet(true);
      }, 0);
    }
  }, [pathname]);

  async function getActualAttr() {
    const arrayAttr: any = {};
    dispatch(SetAttributes(arrayAttr));
  }

  // function loadCurrentScene() {
  //   let sceneId = assetID[pathname];
  //   let isCached = cache.find((item: any) => item.id === sceneId);
  //   if (isCached) {
  //     isCached.handleSelect();
  //   } else {
  //     let newScene = products.find((item: any) => item.id === sceneId);
  //     newScene?.handleSelect();
  //   }
  // }

  return (
    <>
      {hasLoaded && (
        <div className={`${s.main_container} ${s.wrapper}`}>
          <PlayerComponent
            customSettings={customSettings}
            ReturnToMainPage={ReturnToMainPage}
            shortId={shortId}
            configSettings={configSettings}
          />
          <Interface returnCartInfo={returnCartInfo} />
          {/* {checkLoadConfig && <Interface />} */}
          <ModalState />
        </div>
      )}
    </>
  );
};