import styles from "../../../../pages/CardsPage/ui/CardsPage.module.css";
import { Divider, Text, Title } from "@mantine/core";
import getColumnColor from "../../Cards/CardsDndColumn/utils/getColumnColor.ts";
import { BoardSchema, CardSummary, StatusSchema } from "../../../../client";
import { getPluralForm } from "../../../../shared/lib/utils.ts";
import { sum } from "lodash";
import { Draggable, Droppable } from "@hello-pangea/dnd";
import DragState from "../../../../pages/CardsPage/enums/DragState.ts";
import { useContextMenu } from "mantine-contextmenu";
import { IconEdit, IconTrash } from "@tabler/icons-react";
import useStatus from "./hooks/useStatus.tsx";
import isModuleInProject, { Modules } from "../../../../modules/utils/isModuleInProject.ts";


type Props = {
    status: StatusSchema;
    board: BoardSchema | null;
    index: number;
    summaries: CardSummary[];
    dragState: DragState;
    refetch: () => void;
}

const Status = ({ summaries, status, board, dragState, index, refetch }: Props) => {
    const isDropDisabled = dragState === DragState.DRAG_CARD;
    const isServicesAndProductsIncluded = isModuleInProject(Modules.SERVICES_AND_PRODUCTS, board?.project);

    const {
        onEditStatusClick,
        onDeleteStatusClick,
    } = useStatus({ refetch });

    const getDealsText = () => {
        const pluralForm = getPluralForm(
            summaries.length,
            "сделка",
            "сделки",
            "сделок",
        );
        const priceLabel = isServicesAndProductsIncluded
            ? `: ${sum(summaries.map(summary => summary.totalPrice)).toLocaleString("ru-RU")}₽`
            : "";
        return `${summaries.length} ${pluralForm}` + priceLabel;
    };

    const { showContextMenu } = useContextMenu();

    const contextMenu = () => showContextMenu([
        {
            key: "complete",
            onClick: () => onEditStatusClick(status),
            title: "Переименовать",
            icon: <IconEdit />,
        },
        {
            key: "delete",
            onClick: () => onDeleteStatusClick(status),
            title: "Удалить",
            icon: <IconTrash />,
        },
    ]);

    return (
        <Droppable
            isDropDisabled={isDropDisabled}
            droppableId={"status-" + status.id.toString()}
            direction={"horizontal"}
        >
            {provided => (
                <div
                    {...provided.droppableProps}
                    ref={provided.innerRef}
                >
                    <Draggable
                        draggableId={"status-" + status.id.toString()}
                        index={status.ordinalNumber}
                    >
                        {(provided) => (
                            <div
                                {...provided.draggableProps}
                                {...provided.dragHandleProps}
                                ref={provided.innerRef}

                                className={styles["header-statuses"]}
                                onContextMenu={contextMenu()}
                            >
                                <Title
                                    style={{ textAlign: "center" }}
                                    size={"h4"}>
                                    {status.name}
                                </Title>
                                <Text style={{ textAlign: "center", textWrap: "nowrap" }}>
                                    {getDealsText()}
                                </Text>
                                <Divider
                                    size={"xl"}
                                    my={10}
                                    color={getColumnColor(index)}
                                />
                            </div>
                        )}
                    </Draggable>
                    {provided.placeholder}
                </div>
            )}
        </Droppable>
    );
};

export default Status;
