import { FC, ReactNode } from "react";
import { Draggable } from "@hello-pangea/dnd";
import { IconGripVertical } from "@tabler/icons-react";
import classNames from "classnames";
import { DataTableDraggableRow } from "mantine-datatable";
import { Center, TableTd, TableTrProps } from "@mantine/core";
import classes from "@/app/services/components/shared/ServicesTable/ServicesTable.module.css";
import useIsMobile from "@/hooks/utils/useIsMobile";

type Props = {
    draggableId: string;
    index: number;
    rowElement: ReactNode;
    expandedElement?: ReactNode;
    rowProps: TableTrProps;
    disableDndOnMobile?: boolean;
};

const DraggableTableRow: FC<Props> = ({
    draggableId,
    index,
    rowElement,
    expandedElement,
    rowProps,
}) => {
    const isMobile = useIsMobile();

    return (
        <>
            <Draggable
                key={draggableId}
                draggableId={draggableId}
                index={index}>
                {(provided, snapshot) => (
                    <DataTableDraggableRow
                        isDragging={snapshot.isDragging}
                        {...rowProps}
                        className={classNames(
                            rowProps.className,
                            classes["draggable-row"]
                        )}
                        {...provided.draggableProps}>
                        <TableTd maw={isMobile ? 2 : "auto"}>
                            <Center
                                {...provided.dragHandleProps}
                                ref={provided.innerRef}>
                                <IconGripVertical />
                            </Center>
                        </TableTd>
                        {rowElement}
                    </DataTableDraggableRow>
                )}
            </Draggable>
            {expandedElement}
        </>
    );
};
export default DraggableTableRow;
