"use client";

import React, { FC, ReactNode } from "react";
import DealCard from "@/app/deals/components/shared/DealCard/DealCard";
import DealContainer from "@/app/deals/components/shared/DealContainer/DealContainer";
import StatusColumnHeader from "@/app/deals/components/shared/StatusColumnHeader/StatusColumnHeader";
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/utils/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,
        swiperRef,
    } = useDealsAndStatusesDnd();

    return (
        <FunnelDnd
            containers={sortedStatuses}
            items={deals}
            onDragStart={handleDragStart}
            onDragOver={handleDragOver}
            onDragEnd={handleDragEnd}
            swiperRef={swiperRef}
            getContainerId={(status: StatusSchema) => `${status.id}-status`}
            getItemsByContainer={(status: StatusSchema, items: DealSchema[]) =>
                sortByLexorank(
                    items.filter(deal => deal.statusId === status.id)
                )
            }
            renderContainer={(
                status: StatusSchema,
                funnelColumnComponent: ReactNode,
                renderDraggable,
                index
            ) => (
                <StatusColumnWrapper
                    status={status}
                    renderHeader={renderDraggable}
                    createFormEnabled={index === 0}>
                    {funnelColumnComponent}
                </StatusColumnWrapper>
            )}
            renderContainerHeader={status => (
                <StatusColumnHeader
                    status={status}
                    isDragging={activeStatus?.id === status.id}
                />
            )}
            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}
                    renderHeader={() => (
                        <StatusColumnHeader
                            status={status}
                            isDragging={activeStatus?.id === status.id}
                        />
                    )}>
                    {children}
                </StatusColumnWrapper>
            )}
            disabledColumns={isMobile}
            isCreatingContainerEnabled={!!selectedBoard}
        />
    );
};

export default Funnel;