import React, { useEffect } from 'react';
import { SheetNavigation } from './components/calculator/SheetNavigation';
import { useCalculatorStore } from './store/calculatorStore';
import { CodeSheet } from './components/calculator/sheets/CodeSheet';
import { WindSheet } from './components/calculator/sheets/WindSheet';
import { SnowLoadsSheet } from './components/calculator/sheets/SnowLoadsSheet';
import { SnowLoadsSheet2 } from './components/calculator/sheets/SnowLoadsSheet2';
import { SeismicSheet } from './components/calculator/sheets/SeismicSheet';
import { MwfrsSheet } from './components/calculator/sheets/MwfrsSheet';
import { MwfrsLowRiseSheet } from './components/calculator/sheets/MwfrsLowRiseSheet';
import { ComponentsCladdingLowRiseSheet } from './components/calculator/sheets/ComponentsCladdingLowRiseSheet';
import { OpenBuildingsSheet } from './components/calculator/sheets/OpenBuildingsSheetV2';
import { RooftopStructuresSheet } from './components/calculator/sheets/RooftopStructuresSheetV2';
import { OtherStructuresSheet } from './components/calculator/sheets/OtherStructuresSheet';
import { RainLoadsSheet } from './components/calculator/sheets/RainLoadsSheet';
import { TornadoSheet } from './components/calculator/sheets/TornadoSheet';
import { TornadoMwfrsSheet } from './components/calculator/sheets/TornadoMwfrsSheet';
import { RoofDesignLoadsSheet } from './components/calculator/sheets/RoofDesignLoadsSheet';
import { FloorDesignLoadsSheet } from './components/calculator/sheets/FloorDesignLoadsSheet';
import './App.css';

const App: React.FC = () => {
  const { activeSheet } = useCalculatorStore();

  useEffect(() => {
    document.title = 'Project - Calculator';
  }, []);

  return (
    <div className="app-layout">
      <header className="app-header">
        <h1 className="logo">ASCE 7-22</h1>
      </header>

      <div className="app-body">
        <SheetNavigation />

        <main className="main-content">
          {activeSheet === 'Code' && <CodeSheet />}
          {activeSheet === 'Wind' && <WindSheet />}
          {activeSheet === 'MWFRS all h' && <MwfrsSheet />}
          {activeSheet === "MWFRS h ≤ 60'" && <MwfrsLowRiseSheet />}
          {activeSheet === "C&C h ≤ 60'" && <ComponentsCladdingLowRiseSheet />}
          {activeSheet === 'Open Buildings' && <OpenBuildingsSheet />}
          {activeSheet === 'Roof Loads' && <RoofDesignLoadsSheet />}
          {activeSheet === 'Floor Loads' && <FloorDesignLoadsSheet />}
          {activeSheet === 'Roof W' && <RooftopStructuresSheet />}
          {activeSheet === 'Other W' && <OtherStructuresSheet />}
          {activeSheet === 'Rain' && <RainLoadsSheet />}
          {activeSheet === 'Tornado' && <TornadoSheet />}
          {activeSheet === 'Tornado MWFRS' && <TornadoMwfrsSheet />}
          {activeSheet === 'Snow-1' && <SnowLoadsSheet />}
          {activeSheet === 'Snow-2' && <SnowLoadsSheet2 />}
          {activeSheet === 'Seismic' && <SeismicSheet />}
        </main>
      </div>
    </div>
  );
};

export default App;