import React, { useState, useContext } from 'react';
import { observer } from 'mobx-react-lite';
import SavingButton from '../SavingButton';
import ProjectStore from '../../stores/projectStore';
import ReactModal from 'react-modal';
import FieldLabel from '../FieldLabel';
import FieldInput from '../FieldInput';
import getAPIUrl from '../GetAPIUrl';

const ObjectGooglePoly = observer(({ field, spaceId }) => {
  const [savingModel, setSavingModel] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [assets, setAssets] = useState([]);
  const projectStore = useContext(ProjectStore);
  const apiUrl = getAPIUrl();

  const modelSelect = asset => {
    closeModal();
    setAssets([]);
    setSavingModel(true);
    const format = asset.formats.find(format => {
      return format.formatType === 'GLTF2';
    });

    if (format !== 'undefined') {
      const mainObjectItemUrl = format.root.url;
      const objectResources = format.resources.map(item => item.url);
      const data = {
        object_name: asset.displayName,
        main_object_file: mainObjectItemUrl,
        object_files: objectResources,
        thumbnail: asset.thumbnail.url,
        attribute: asset.authorName
      };
      projectStore
        .updateField(spaceId, field.id, data)
        .then(() => setSavingModel(false));
    }
  };

  function openModal() {
    setShowModal(true);
  }

  function closeModal() {
    setShowModal(false);
    setAssets([]);
    setSearchTerm('');
  }

  const searchGooglePoly = event => {
    event.preventDefault();
    const API_KEY = process.env.REACT_APP_POLY_API_KEY;
    const url = `https://poly.googleapis.com/v1/assets?keywords=${searchTerm}&format=GLTF2&key=${API_KEY}`;

    const request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.addEventListener('load', function(event) {
      const data = JSON.parse(event.target.response);
      setAssets(data.assets);
    });
    request.send(null);
  };

  return (
    <React.Fragment>
      <FieldLabel htmlFor="file" className="f4 db ttc">
        {field.label}
      </FieldLabel>
      <FieldInput className="cf overflow-hidden">
        <div className="fl">
          <SavingButton
            label
            htmlFor="file"
            disabled={savingModel}
            isLoading={savingModel}
            className="f6 link dim br2 ph2 pv2 mv2 dib white bg-dark-gray pointer"
            onClick={openModal}
          >
            Select Model
          </SavingButton>
          <ReactModal
            appElement={document.body}
            isOpen={showModal}
            className="absolute shadow-2 bg-white br2 outline-0 pa2 top-2 bottom-1 left-1 right-1 overflow-scroll"
            shouldCloseOnOverlayClick={true}
            shouldCloseOnEsc={true}
            onRequestClose={closeModal}
          >
            <React.Fragment>
              <form
                onSubmit={searchGooglePoly}
                className="center w-100 w-30-ns mt2 mb4"
              >
                <div className="cf">
                  <input
                    type="text"
                    value={searchTerm}
                    onChange={e => {
                      setSearchTerm(e.target.value);
                    }}
                    className="f6 f5-l input-reset bn fl black-80 bg-light-gray pa3 lh-solid w-100 w-60-m w-70-l br2-ns br--left-ns outline-0"
                    placeholder="Search"
                  />
                  <button
                    type="submit"
                    className="f6 f5-l button-reset fl pv3 tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 w-40-m w-30-l br2-ns br--right-ns"
                  >
                    Search
                  </button>
                </div>
              </form>
              <div>
                {assets.map((asset, index) => (
                  <img
                    alt={asset.displayName || 'object'}
                    src={asset.thumbnail.url}
                    key={index}
                    className="w4 h4 ma2"
                    onClick={modelSelect.bind(null, asset)}
                  />
                ))}
              </div>
            </React.Fragment>
          </ReactModal>
        </div>
        <div className="fl">
          {field.folder && field.object_filename && (
            <img
              alt="photosphere"
              src={apiUrl + field.folder + field.thumbnail}
            />
          )}
        </div>
      </FieldInput>
    </React.Fragment>
  );
});

export default ObjectGooglePoly;

@@ -343,16 +343,64 @@
 APIUrl';
+%0Aimport LoadingSpinner from '../LoadingSpinner';
 %0A%0Aconst 
@@ -659,16 +659,71 @@
 te(%5B%5D);%0A
+  const %5BisSearching, setSearching%5D = useState(false);%0A
   const 
@@ -1879,17 +1879,40 @@
 _KEY%7D%60;%0A
+    setSearching(true);
 %0A
-
     cons
@@ -2032,24 +2032,51 @@
 on(event) %7B%0A
+      setSearching(false);%0A
       const 
@@ -2118,24 +2118,41 @@
 onse);%0A     
+ if (data.assets)
  setAssets(d
@@ -2164,16 +2164,60 @@
 ssets);%0A
+      else %7B%0A        setAssets(%5B%5D);%0A      %7D%0A
     %7D);%0A
@@ -4083,20 +4083,143 @@
        %3C
-div%3E
+React.Fragment%3E%0A                %7BisSearching ? (%0A                  %3CLoadingSpinner /%3E%0A                ) : assets.length %3E 0 ? (
 %0A       
@@ -4227,17 +4227,18 @@
         
-%7B
+  
 assets.m
@@ -4260,16 +4260,18 @@
 x) =%3E (%0A
+  
         
@@ -4301,24 +4301,26 @@
             
+  
 alt=%7Basset.d
@@ -4359,24 +4359,26 @@
             
+  
 src=%7Basset.t
@@ -4411,16 +4411,18 @@
         
+ 
+ 
 key=%7Bind
@@ -4425,16 +4425,18 @@
 %7Bindex%7D%0A
+  
         
@@ -4481,32 +4481,34 @@
                 
+ 
+ 
 onClick=%7BmodelSe
@@ -4541,32 +4541,34 @@
                 
+  
 /%3E%0A             
@@ -4574,31 +4574,146 @@
     
-))%7D%0A              %3C/div
+  ))%0A                ) : (%0A                  %3Cdiv className=%22f4 tc%22%3ENo items found%3C/div%3E%0A                )%7D%0A              %3C/React.Fragment
 %3E%0A  

fix issue when poly results return empty