"use client";

import React, { FC, ReactNode } from "react";
import { Group, ScrollArea } from "@mantine/core";
import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton";
import DealCard from "@/app/deals/components/shared/DealCard/DealCard";
import DealContainer from "@/app/deals/components/shared/DealContainer/DealContainer";
import StatusColumnWrapper from "@/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
import useDealsAndStatusesDnd from "@/app/deals/hooks/useDealsAndStatusesDnd";
import FunnelDnd from "@/components/dnd/FunnelDnd/FunnelDnd";
import useIsMobile from "@/hooks/useIsMobile";
import { DealSchema, StatusSchema } from "@/lib/client";
import { sortByLexorank } from "@/utils/lexorank";

const Funnel: FC = () => {
    const { selectedBoard } = useBoardsContext();
    const { deals } = useDealsContext();
    const isMobile = useIsMobile();

    const {
        sortedStatuses,
        handleDragStart,
        handleDragOver,
        handleDragEnd,
        activeStatus,
        activeDeal,
    } = useDealsAndStatusesDnd();

    const renderFunnelDnd = () => (
        <FunnelDnd
            containers={sortedStatuses}
            items={deals}
            onDragStart={handleDragStart}
            onDragOver={handleDragOver}
            onDragEnd={handleDragEnd}
            getContainerId={(status: StatusSchema) => `${status.id}-status`}
            getItemsByContainer={(status: StatusSchema, items: DealSchema[]) =>
                sortByLexorank(
                    items.filter(deal => deal.statusId === status.id)
                )
            }
            renderContainer={(
                status: StatusSchema,
                funnelColumnComponent: ReactNode
            ) => (
                <StatusColumnWrapper
                    status={status}
                    isDragging={activeStatus?.id === status.id}>
                    {funnelColumnComponent}
                </StatusColumnWrapper>
            )}
            renderItem={(deal: DealSchema) => (
                <DealContainer
                    key={deal.id}
                    deal={deal}
                />
            )}
            activeContainer={activeStatus}
            activeItem={activeDeal}
            renderItemOverlay={(deal: DealSchema) => <DealCard deal={deal} />}
            renderContainerOverlay={(status: StatusSchema, children) => (
                <StatusColumnWrapper
                    status={status}
                    isDragging>
                    {children}
                </StatusColumnWrapper>
            )}
            disabledColumns={isMobile}
            isCreatingContainerEnabled={!!selectedBoard}
        />
    );

    if (isMobile) return renderFunnelDnd();

    return (
        <ScrollArea
            offsetScrollbars={"x"}
            scrollbarSize={"0.5rem"}>
            <Group
                align={"start"}
                wrap={"nowrap"}
                gap={"xs"}>
                {renderFunnelDnd()}
                {selectedBoard && <CreateStatusButton />}
            </Group>
        </ScrollArea>
    );
};

export default Funnel;