import { initializeBlock, Box, useSettingsButton } from "@airtable/blocks/ui";
import React, { useState } from "react";
import StepWizard from "react-step-wizard";

import { SettingsComponent } from "./settings.js";
import { RefreshQueueStep } from "./refresh-queue.js";
import { SendMessagesStep } from "./send-messages.js";

function MainUIComponent() {
  return (
    <Box padding={3}>
      <StepWizard>
        <RefreshQueueStep />
        <SendMessagesStep />
      </StepWizard>
    </Box>
  );
}

function ComponentWithSettings() {
  const [isShowingSettings, setIsShowingSettings] = useState(false);
  useSettingsButton(function () {
    setIsShowingSettings(!isShowingSettings);
  });

  if (isShowingSettings) {
    return <SettingsComponent exit={() => setIsShowingSettings(false)} />;
  }
  return <MainUIComponent />;
}

initializeBlock(() => <ComponentWithSettings />);