"use client";

import React, { FC, ReactNode } from "react";
import DealCard from "@/app/deals/components/shared/DealCard/DealCard";
import DealsGroup from "@/app/deals/components/shared/DealsGroup/DealsGroup";
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 GroupWithDealsSchema from "@/types/GroupWithDealsSchema";
import { sortByLexorank } from "@/utils/lexorank/sort";

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

    const { sortedStatuses, handleDragOver, handleDragEnd, swiperRef } =
        useDealsAndStatusesDnd();

    return (
        <FunnelDnd<StatusSchema, DealSchema, GroupWithDealsSchema>
            containers={sortedStatuses}
            itemsAndGroups={sortByLexorank([
                ...dealsWithoutGroup,
                ...groupsWithDeals,
            ])}
            onDragOver={handleDragOver}
            onDragEnd={handleDragEnd}
            swiperRef={swiperRef}
            getItemsByContainer={(status: StatusSchema) =>
                sortByLexorank([
                    ...dealsWithoutGroup.filter(
                        deal => deal.status.id === status.id
                    ),
                    ...groupsWithDeals.filter(
                        group => group.items[0].status.id === 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={false}
                />
            )}
            renderItem={(deal: DealSchema) => (
                <DealCard
                    key={deal.id}
                    deal={deal}
                />
            )}
            renderGroup={(group: GroupWithDealsSchema) => (
                <DealsGroup
                    key={`${group.id}group`}
                    group={group}
                />
            )}
            renderContainerOverlay={(status: StatusSchema, children) => (
                <StatusColumnWrapper
                    status={status}
                    renderHeader={() => (
                        <StatusColumnHeader
                            status={status}
                            isDragging
                        />
                    )}>
                    {children}
                </StatusColumnWrapper>
            )}
            disabledColumns={isMobile}
            isCreatingContainerEnabled={!!selectedBoard}
        />
    );
};

export default Funnel;
