import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Componnets, use3dddPlus } from '../.';
import { shallow } from 'zustand/shallow';

const App = () => {
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const projectId = urlParams.get('projectId');
  const productId = urlParams.get('productId');
  const [accessToken] = use3dddPlus((state) => [state.accessToken], shallow);
  const modelId = use3dddPlus((state) => state.modelId);

  // API calls for Login in 3dddPlus
  React.useEffect(() => {
    if (!projectId) return;
    // setCookie('projectId', projectId, 1);
    use3dddPlus.getState().mutation.login(projectId);
  }, [projectId]);

  // API calls for Product Details and Varients Detail
  React.useEffect(() => {
    if (!accessToken) return;
    use3dddPlus.getState().queries.getDetails(productId!, projectId!);
    if (!modelId) return;
    use3dddPlus.getState().queries.getVarientByModelId(modelId!);
  }, [accessToken, modelId]);
  return (
    <div className="flex flex-col">
      {/* {children ||
        `You Should not see this Screen! If you're then the Customizer is still under maintainance`} */}
      <div className="flex md:flex-row flex-col h-screen">
        <Componnets.Canvas />
        <Componnets.Sidebar />
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
