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";

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

export const Board: FC<Props> = ({droppableId, title, summaries, withCreateButton = false}) => {


    return (
        <div className={styles["container"]}>
            <div className={styles["header"]}>
                <Title size={"h4"}>{title}</Title>
                <Text>12 сделок: 500р</Text>
                <Divider size={"xl"} my={10} color={"blue"}/>
            </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={1}
                                    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;