import {
  useConfigurator,
  useThreekitInitStatus,
} from '@threekit-tools/treble/dist';
import { ThreekitProvider } from '@threekit-tools/treble';

import React, { useEffect, useState } from 'react';
import s from './MainComponent.module.scss';
import { Interface } from '../../mainComponents/Interface/Interface';
import { ModalState } from '../../mainComponents/modals/ModalState/ModalState';
import PlayerComponent from '../../mainComponents/PlayerComponent/PlayerComponent';
import { useStoreSelector } from '../../App';
import { getConfigInfo } from '../../store/selectors/selectors';

export const MainComponent = React.memo(({ ...props }) => {
  const { assetID }: any = props;
  const [checkLoadConfig, setCheckLoadConfig] = useState(false);
  const configInfo = useStoreSelector(getConfigInfo);
  useEffect(() => {
    if (configInfo.isShortId) {
      setCheckLoadConfig(configInfo.isShortId);
    }
  }, [configInfo.isShortId]);

  const projects: any = {
    credentials: {
      preview: {
        //  These credentials are just examples and DO NOT
        //  point to a real org
        publicToken: process.env.THREEKIT_PREVIEW_PUBLIC_TOKEN,
        orgId: process.env.THREEKIT_PREVIEW_ORG_ID,
      },
    },
    products: {
      preview: {
        assetId: assetID,
      },
    },
  };

  const playerConfig = {
    allowMobileVerticalOrbit: true,
  };

  const threekitEnv = 'preview';

  return (
    <ThreekitProvider
      project={projects}
      threekitEnv={threekitEnv}
      playerConfig={playerConfig}
    >
      <div className={`${s.main_container} ${s.wrapper}`}>
        <PlayerComponent />

        {checkLoadConfig && <Interface />}

        <ModalState />
      </div>
    </ThreekitProvider>
  );
});