import {FC} from "react";
import styles from './Board.module.css';
import {Divider, Text, Title} from '@mantine/core';
import {Draggable, Droppable} from "@hello-pangea/dnd";
import CreateDealButton from "../CreateDealButton/CreateDealButton.tsx";
import {DealSummary} from "../../../client";
import DealSummaryCard from "../DealSummaryCard/DealSummaryCard.tsx";
import classNames from "classnames";
import {getPluralForm} from "../../../shared/lib/utils.ts";
import {sum} from "lodash";

type Props = {
    droppableId: string;
    title: string;
    withCreateButton?: boolean;
    summaries: DealSummary[];
    color: string;
}

export const Board: FC<Props> = ({droppableId, title, summaries, color, withCreateButton = false}) => {
    const getDealsText = () => {
        const pluralForm = getPluralForm(summaries.length, 'сделка', 'сделки', 'сделок');
        return `${summaries.length} ${pluralForm}: ${sum(summaries.map(summary => summary.totalPrice)).toLocaleString("ru-RU")}₽`;
    }

    return (
        <div className={styles["container"]}>
            <div className={styles["header"]}>
                <Title size={"h4"}>{title}</Title>
                <Text>{getDealsText()}</Text>
                <Divider size={"xl"} my={10} color={color}/>
            </div>
            <Droppable
                droppableId={droppableId}
            >
                {(provided, snapshot) => (
                    <div ref={provided.innerRef}
                         className={classNames(
                             styles["items-list"],
                             (snapshot.isDraggingOver && !snapshot.draggingFromThisWith)
                             && styles["items-list-drag-over"]
                         )}
                         {...provided.droppableProps}
                    >
                        {withCreateButton &&
                            <CreateDealButton

                                onClick={() => {
                                }}
                            />}
                        {summaries.map(summary =>
                            (
                                <Draggable
                                    draggableId={summary.id.toString()}
                                    index={summary.rank}
                                    key={summary.id}
                                >
                                    {(provided) => (
                                        <div            {...provided.draggableProps}
                                                        {...provided.dragHandleProps}
                                                        ref={provided.innerRef}

                                        >
                                            <DealSummaryCard dealSummary={summary}/>
                                        </div>

                                    )}
                                </Draggable>
                            ))}

                        {provided.placeholder}
                    </div>
                )}
            </Droppable>

        </div>
    )
}

export default Board;