import React, { useState, useEffect } from 'react';
import { threekitService } from './../toolkit/threekit.service';
import { handleAddToCart, handleInputSelect } from '../../config/eventListeners';
import toolkit from '../toolkit';

const TemplateContainer = ({
  template: Template,
  title,
  subtitle,
  getHandleInputSelect,
  getHandleAddToCart,
  threekitConfig
}) => {
  const [controller, setController] = useState([]);
  const [configuration, setConfiguration] = useState(null);
  const [languageData, setLanguageData] = useState({});
  console.log('threekitConfig =>', threekitConfig);

  const getUrlParameter = () => {
    const urlParameter = window.location.search;
    const urlParams = new URLSearchParams(urlParameter);
    const initialSettings = {
      authToken: urlParams.has('authToken') === true ? urlParams.get('authToken') : threekitConfig.authToken,
      assetId: urlParams.has('assetId') === true ? urlParams.get('assetId') : threekitConfig.assetId,
      orgId: urlParams.has('orgId') === true ? urlParams.get('orgId') : threekitConfig.orgId,
      showAR: urlParams.has('showAR') === true ? urlParams.get('showAR') === 'true' ? true : false : false,
      showConfigurator: urlParams.has('showConfigurator') === true ? urlParams.get('showConfigurator') === 'true' ? true : false : false,
      stageId: urlParams.has('stageId') === true ? urlParams.get('stageId') : null,
      locale: urlParams.has('locale') === true ? urlParams.get('locale') : threekitConfig.defaultLocale,
      currency: urlParams.has('currency') === true ? urlParams.get('currency') : threekitConfig.currency,
      pricebookName: urlParams.has('pricebookName') === true ? urlParams.get('pricebookName') : threekitConfig.pricebookName
    };
    return initialSettings;
  };

  const threekitConfigByUrl = getUrlParameter(); // eslint-disable-next-line no-unused-expressions

  threekitConfigByUrl.authToken !== null && threekitConfigByUrl.assetId !== null && threekitConfigByUrl.orgId !== null ? threekitConfig = threekitConfigByUrl : null;
  console.log('threekitConfigByUrl =>', threekitConfigByUrl);
  console.log('threekitConfig.env =>', threekitConfigByUrl.env);
  console.log('threekitConfigByUrl.locale =>', threekitConfigByUrl.locale);
  console.log('threekitConfigByUrl.orgId =>', threekitConfigByUrl.orgId);
  console.log('threekitConfigByUrl.authToken =>', threekitConfigByUrl.authToken);
  useEffect(() => {
    (async () => {
      const serviceUrl = `${threekitConfigByUrl.env}/api/assets/translations?locale=${threekitConfigByUrl.locale}&orgId=${threekitConfigByUrl.orgId}&bearer_token=${threekitConfigByUrl.authToken}`;
      await threekitService('get', serviceUrl).then(res => {
        setLanguageData(res);
      });
      toolkit.player.initializePlayer({
        el: document.getElementById('player-root'),
        ...threekitConfig,
        onPreload: async () => {
          localStorage.setItem('catalog-sections', null);
          localStorage.setItem('catalog-inputs', null);
          localStorage.setItem('catalog-attributes', null);
          const templateData = await toolkit.template.prepTemplate();
          setController(templateData);
        }
      });
    })();
  }, []);
  console.log('languageData =>', languageData);

  const handleSetAttribute = async config => {
    await toolkit.player.setConfiguration({
      [config.parent]: config.assetId
    });
    const updatedConfiguration = toolkit.player.getConfiguration();
    await toolkit.template.prepTemplate(config).then(async result => {
      const templateData = result;
      setController(templateData);
      await toolkit.player.getNewUpdateConfiguration(updatedConfiguration);
      setConfiguration(updatedConfiguration);
      handleInputSelect(updatedConfiguration, getHandleInputSelect);
    });
  };

  const addToCart = async () => {
    const configOutput = await toolkit.player.getConfigurationOutput();
    handleAddToCart(configOutput, getHandleAddToCart);
  };

  return /*#__PURE__*/React.createElement(Template, {
    title: title,
    subtitle: subtitle,
    controller: controller,
    configuration: configuration,
    languageData: languageData,
    handleSetAttribute: handleSetAttribute,
    threekitConfigByUrl: threekitConfigByUrl
  });
};

export default TemplateContainer;