import { useGetProviderSuspense } from "@/api/provider";
import { ScrollArea } from "@/components/ui/scroll-area";
import { ProviderCreateForm } from "@/features/Tabs/ProviderPanel/ProviderCreateForm";
import { ProviderEditForm } from "@/features/Tabs/ProviderPanel/ProviderEditForm";
import { useTabsStore } from "@/stores/tabs-store";
import type { ProviderTabMetadata } from "@/types/tab";
import type { TabPanelProps } from "../index";
import { TabPanelFrame } from "../components/TabPanelFrame";

function ProviderCreatePanel({ tabId }: { tabId: string }) {
  const removeTab = useTabsStore((state) => state.remove);
  const handleComplete = () => removeTab(tabId);

  return <ProviderCreateForm onConfirm={handleComplete} />;
}

function ProviderEditPanel({
  tabId,
  providerId,
}: {
  tabId: string;
  providerId: number;
}) {
  const removeTab = useTabsStore((state) => state.remove);
  const { data: provider } = useGetProviderSuspense(providerId);
  const handleComplete = () => removeTab(tabId);

  return <ProviderEditForm provider={provider} onConfirm={handleComplete} />;
}

export function ProviderPanel({
  id,
  metadata,
}: TabPanelProps<ProviderTabMetadata>) {
  if (metadata.mode === "create") {
    return (
      <ScrollArea className="h-full px-8">
        <ProviderCreatePanel tabId={id} />
      </ScrollArea>
    );
  }

  return (
    <TabPanelFrame>
      <ProviderEditPanel tabId={id} providerId={metadata.id} />
    </TabPanelFrame>
  );
}
