import React from 'react';
import { Button, Container, Nav, Navbar } from 'react-bootstrap';
import AlgorithmSteps from './components/AlgorithmSteps/AlgorithmSteps';
import { AlgorithmStep, nextAlgStep, previousAlgStep } from './common/algorithmSteps';
import LogicDefinition from './pages/LogicDefintion';

function App() {
  const [step, setStep] = React.useState(AlgorithmStep.LOGIC_CIRCUIT_DEFINTION);

  return (
    <>
      <Container className="mt-4">
          <AlgorithmSteps
            step={step}
            enableNextStep={step !== AlgorithmStep.COLLECTING_PRIME_IMPLICANTS}
            enablePreviousStep={step !== AlgorithmStep.LOGIC_CIRCUIT_DEFINTION}
            onNextStep={() => setStep(nextAlgStep(step))}
            onPreviousStep={() => setStep(previousAlgStep(step))}
          ></AlgorithmSteps>

          {step === AlgorithmStep.LOGIC_CIRCUIT_DEFINTION && (
            <LogicDefinition />
          ) || step === AlgorithmStep.KKNF_KDNF && (
            <div>Truth Table Page</div>
          ) || step === AlgorithmStep.PERFORMING_MINIMIZATION && (
            <div>Performing Minimization Page</div>
          ) || step === AlgorithmStep.COLLECTING_PRIME_IMPLICANTS && (
            <div>Collecting Prime Implicants Page</div>
          )}

      </Container>
    </>
  );
}

export default App;