import { Component, ParentProps, createSignal } from "solid-js";
import Sidebar from "./components/Sidebar";
import "./App.css";
import { SidebarProvider, useIsMobile, useSidebar } from "./components/ui/sidebar";
import TitleBar from "./components/TitleBar";
import { Toaster } from "./components/ui/toast";

const App: Component = (props: ParentProps) => {
  const isMobile = useIsMobile();
  const [shouldRefresh, setShouldRefresh] = createSignal(false);

  const handleRefresh = () => {
    setShouldRefresh(prev => !prev);
  };

  return (
    <div class="app-layout">
      <SidebarProvider>
        {/* 根据刷新状态重新渲染 Sidebar */}
        {shouldRefresh() ? (
          <Sidebar />
        ) : (
          <Sidebar />
        )}
        <div class="flex flex-col w-full">
          <Toaster />
          <TitleBar onRefresh={handleRefresh} isSidebarOpen={!isMobile() && useSidebar().open()} />
          {shouldRefresh() ? (
            <main class="main-content w-full h-[calc(100vh-48px)] mt-12 overflow-y-auto" id="main-content">
              {props.children}
            </main>
          ) : (
            <main class="main-content w-full h-[calc(100vh-48px)] mt-12 overflow-y-auto" id="main-content">
              {props.children}
            </main>
          )}
        </div>
      </SidebarProvider>
    </div>
  );
};

export default App;