import {styled} from "@mui/styles";
import React, {useEffect, useState} from "react";
import {querySyncStatus, SyncStatus, triggerSync} from "../api/bbgo";
import useInterval from "../hooks/useInterval";

const ToolbarButton = styled('button')(({ theme }) => ({
  padding: theme.spacing(1),
}));

export default function SyncButton() {
  const [syncing, setSyncing] = useState(false);
  
  const sync = async () => {
    try {
      setSyncing(true);
      await triggerSync();
    } catch {
      setSyncing(false);
    }
  };
  
  useEffect(() => {
    sync();
  }, [])
  
  useInterval(() => {
    querySyncStatus().then(s => {
      if (s !== SyncStatus.Syncing) {
        setSyncing(false);
      }
    })
  }, 2000)
  
  return (
    <ToolbarButton
      disabled={syncing}
      onClick={sync}
    >
      {syncing ? 'Syncing...' : 'Sync'}
    </ToolbarButton>
  );
}