import { FC, useState } from "react";
import { useCardSummaries } from "../hooks/useCardSummaries.tsx";
import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
import CardEditDrawer from "../drawers/CardEditDrawer/CardEditDrawer.tsx";
import { CardPageContextProvider } from "../contexts/CardPageContext.tsx";
import { rem } from "@mantine/core";
import useCardsPageState from "../hooks/useCardsPageState.tsx";
import CardsTable from "../components/CardsTable/CardsTable.tsx";
import { motion } from "framer-motion";
import CardPrefillDrawer from "../drawers/CardPrefillDrawer/CardPrefillDrawer.tsx";
import { PrefillCardContextProvider } from "../contexts/PrefillCardContext.tsx";
import { useParams } from "@tanstack/react-router";
import { PrefillCardsWithExcelContextProvider } from "../contexts/PrefillDealsWithExcelContext.tsx";
import DisplayMode from "../enums/DisplayMode.ts";
import CardsPageHeader from "../components/CardsPageHeader/CardsPageHeader.tsx";
import Boards from "../../../components/Dnd/Boards/Boards/Boards.tsx";
import useBoards from "../hooks/useBoards.tsx";
import { ProjectsEditorContextProvider } from "../contexts/ProjectsEditorContext.tsx";
import ProjectEditDrawer from "../drawers/ProjectEditDrawer/ProjectEditDrawer.tsx";

export const CardsPage: FC = () => {
    const { data, form } = useCardsPageState();
    const { boards, refetchBoards } = useBoards();
    const { dealId } = useParams({ strict: false });
    const { summariesRaw, refetch: refetchSummaries } = useCardSummaries();

    const [displayMode, setDisplayMode] = useState<DisplayMode>(
        DisplayMode.BOARD,
    );

    const getTableBody = () => {
        return (
            <CardsTable items={data} />
        );
    };

    const getBoardsBody = () => {
        return (
            <Boards
                summariesRaw={summariesRaw}
                refetchSummaries={refetchSummaries}
                boards={boards}
                refetchBoards={refetchBoards}
            />
        );
    };

    const getBody = () => {
        return (
            <motion.div
                key={displayMode}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.2 }}>
                {displayMode === DisplayMode.TABLE
                    ? getTableBody()
                    : getBoardsBody()
                }
            </motion.div>
        );
    };

    return (
        <PageBlock
            fullHeight
            style={{
                gap: rem(10),
                display: "flex",
                flexDirection: "column",
                backgroundColor: "transparent",
                boxShadow: "none",
                padding: 0,
            }}
        >
            <ProjectsEditorContextProvider>
                <CardPageContextProvider
                    defaultCardId={(dealId && parseInt(dealId)) || undefined}
                    refetchCards={async () => {
                        await refetchSummaries();
                    }}
                >
                    <PrefillCardContextProvider>
                        <PrefillCardsWithExcelContextProvider>
                            <CardsPageHeader
                                form={form}
                                displayMode={displayMode}
                                setDisplayMode={setDisplayMode}
                            />
                            <PageBlock
                                style={{
                                    display: "flex",
                                    flexDirection: "column",
                                    flex: 1,
                                    height: "100%",
                                }}
                            >
                                {getBody()}
                            </PageBlock>
                            <CardEditDrawer />
                            <ProjectEditDrawer />
                            <CardPrefillDrawer />
                        </PrefillCardsWithExcelContextProvider>
                    </PrefillCardContextProvider>
                </CardPageContextProvider>
            </ProjectsEditorContextProvider>
        </PageBlock>
    );
};
