import { useEffect, useState } from 'react';
import { useInterval } from 'react-use';
import IotaSdk from 'tanglepaysdk-client'

function App() {
  // IotaSdk.redirectAppStoreIfNotInstalled = true;
  const [address, setAddress] = useState('');
  const [isInstalled, setIsInstalled] = useState(false);

    useEffect(() =>
    {
      IotaSdk.isTanglePay ? setIsInstalled(true) : setIsInstalled(false);
    }, []);

    useInterval(() =>
    {
      IotaSdk.isTanglePay ? setIsInstalled(true) : setIsInstalled(false);
    }, 1000);

  const onConnect = () =>
  {
    console.log("Fire")
    IotaSdk.request('iota_connect',  { expires: 3000000 })
          .then(x =>
            {
              alert('Response received');
              alert(x);
            })
          .catch((e) => alert(e));
  };
  return (
    <div className="App">
      {isInstalled ? "TanglePay is installed!" : "Pleasee install Tanglepay"}
      <button onClick={() => onConnect()}>Connect</button>
      <p>
        Address: {address}
      </p>
    </div>
  );
}

export default App;