import { Sidebar } from "@components/Sidebar.js";
import { SettingsIcon, BoxesIcon, SaveIcon } from "lucide-react";
import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
import { PageLayout } from "@components/PageLayout.js";
import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
import { useState } from "react";
import { useDevice } from "@app/core/stores/deviceStore.js";
import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
import { useToast } from "@core/hooks/useToast.js";

export const ConfigPage = (): JSX.Element => {
  const { workingConfig, workingModuleConfig, connection } = useDevice();
  const [activeConfigSection, setActiveConfigSection] = useState<
    "device" | "module"
  >("device");
  const { toast } = useToast();

  return (
    <>
      <Sidebar>
        <SidebarSection label="Config Sections">
          <SidebarButton
            label="Device Config"
            active={activeConfigSection === "device"}
            onClick={() => setActiveConfigSection("device")}
            icon={SettingsIcon}
          />
          <SidebarButton
            label="Module Config"
            active={activeConfigSection === "module"}
            onClick={() => setActiveConfigSection("module")}
            icon={BoxesIcon}
          />
        </SidebarSection>
      </Sidebar>
      <PageLayout
        label={
          activeConfigSection === "device" ? "Device Config" : "Module Config"
        }
        actions={[
          {
            icon: SaveIcon,
            async onClick() {
              if (activeConfigSection === "device") {
                workingConfig.map(
                  async (config) =>
                    await connection?.setConfig(config).then(() =>
                      toast({
                        title: `Config ${config.payloadVariant.case} saved`
                      })
                    )
                );
              } else {
                workingModuleConfig.map(
                  async (moduleConfig) =>
                    await connection?.setModuleConfig(moduleConfig).then(() =>
                      toast({
                        title: `Config ${moduleConfig.payloadVariant.case} saved`
                      })
                    )
                );
              }

              await connection?.commitEditSettings();
            }
          }
        ]}
      >
        {activeConfigSection === "device" ? <DeviceConfig /> : <ModuleConfig />}
      </PageLayout>
    </>
  );
};