import { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../../components/ui/tabs.tsx";
import { useAuthServiceContext } from "../../../../services/AuthService.tsx";
import {
    declaredKinds,
    readDiagnosticsDeclaration,
} from "../../../../utils/organizationDiagnostics";
import TestCatalogue from "./TestCatalogue.tsx";
import LabConnections from "./LabConnections.tsx";
import ImagingReaders from "./ImagingReaders.tsx";
import DiagnosticsSettingsTab from "./DiagnosticsSettingsTab.tsx";
import "./DiagnosticsPage.css";

// A practice with nothing to catalogue opens on Practice setup rather than the area being hidden.
// External laboratories is never gated by the declaration: a practice with no bench sends work out.

const DiagnosticsPage = ({ title = "Lab and imaging setup" }: { title?: string }) => {
    const { currentOrganization } = useAuthServiceContext();
    const declaration = readDiagnosticsDeclaration(currentOrganization ?? undefined);

    const [tab, setTab] = useState(declaredKinds(declaration).length ? "catalogue" : "setup");

    return (
        <div>
            <h1 className="ak-page-title">{title}</h1>

            <div className="ak-page-body">
            <Tabs value={tab} onValueChange={setTab} className="w-full">
                <TabsList variant="line" className="flex-wrap">
                    <TabsTrigger value="setup">Practice setup</TabsTrigger>
                    <TabsTrigger value="laboratories">External laboratories</TabsTrigger>
                    <TabsTrigger value="readers">Reading practices</TabsTrigger>
                    <TabsTrigger value="catalogue">Our test catalogue</TabsTrigger>
                </TabsList>

                <TabsContent value="setup" className="pt-4">
                    <DiagnosticsSettingsTab onManage={setTab} />
                </TabsContent>

                <TabsContent value="laboratories" className="pt-4">
                    <LabConnections />
                </TabsContent>

                <TabsContent value="readers" className="pt-4">
                    <ImagingReaders />
                </TabsContent>

                <TabsContent value="catalogue" className="pt-4">
                    <TestCatalogue declaration={declaration} />
                </TabsContent>
            </Tabs>
            </div>
        </div>
    );
};

export default DiagnosticsPage;