import { useParams } from "@tanstack/react-router";
import { CardPageContextProvider, useCardPageContext } from "../../CardsPage/contexts/CardPageContext.tsx";
import ProductAndServiceTab from "../../../modules/cardModules/cardEditorTabs/ProductAndServiceTab/ProductAndServiceTab.tsx";
import React, { FC, useEffect } from "react";
import { CardService } from "../../../client";

export type Props = {
    cardId: number;
};
const CardPageContent: FC<Props> = ({ cardId }) => {
    const { setSelectedCard } = useCardPageContext();
    useEffect(() => {
        CardService.getCardById({ cardId }).then(card => {
            setSelectedCard(card);
        });
    }, []);
    return <ProductAndServiceTab />;
};

const CardPageWrapper: FC<{ children: React.ReactNode }> = ({ children }) => {
    return (
        <CardPageContextProvider
            refetchCards={async () => {
            }}
        >
            {children}
        </CardPageContextProvider>
    );
};

export const CardPage = () => {
    const { dealId } = useParams({ strict: false });
    return (
        <CardPageWrapper>
            <CardPageContent cardId={parseInt(dealId || "-1")} />
        </CardPageWrapper>
    );
};
