import React from 'react';
import { TableCell, TableRow, TableSortLabel } from '@mui/material';
import cx from 'classnames';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import { Checkbox } from '../..';

export const DragAndDrop = (props: any) => {
    const {
        disableItemSelection = false,
        items,
        keyName,
        itemRenderer,
        onDragEnd,
        direction,
        isDragDisabled,
        selectedItems,
        onChageSelectedItems,
        renderItemSortLabel
    } = props;
    return (
        <>
            <DragDropContext onDragEnd={onDragEnd}>
                <Droppable
                    droppableId="droppable"
                    direction={direction || 'vertical'}
                    renderClone={(provided, snapshot, rubric) => (
                        <div
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            ref={provided.innerRef}
                            className="gtc-rc-droppable-cell"
                        >
                            {(itemRenderer && itemRenderer(items[rubric.source.index])) ||
                                items[rubric.source.index][keyName]}
                        </div>
                    )}
                >
                    {(provided, snapshot) => (
                        <TableRow
                            ref={provided.innerRef}
                            {...provided.droppableProps}
                            className={cx(
                                `gtc-rc-drag-drop-list-container ${
                                    snapshot.isDraggingOver ? 'gtc-rc-dragged' : 'gtc-rc-dragging'
                                }`
                            )}
                        >
                            {!disableItemSelection && (
                                <TableCell padding="checkbox">
                                    <Checkbox
                                        isIndeterminate={
                                            selectedItems.length > 0 &&
                                            selectedItems.length < props.dataItems.length
                                        }
                                        checked={
                                            selectedItems.length === props.dataItems.length &&
                                            props.dataItems.length
                                        }
                                        onChange={(checked) => {
                                            if (checked) {
                                                if (
                                                    selectedItems.length > 0 &&
                                                    selectedItems.length < props.dataItems.length
                                                ) {
                                                    onChageSelectedItems([]);
                                                } else {
                                                    onChageSelectedItems(props.dataItems);
                                                }
                                            } else {
                                                onChageSelectedItems([]);
                                            }
                                        }}
                                    />
                                </TableCell>
                            )}

                            {items &&
                                items.map((item: any, index: any) => (
                                    <Draggable
                                        key={`${item[keyName]}`}
                                        draggableId={`${item[keyName]}`}
                                        index={index}
                                        isDragDisabled={isDragDisabled}
                                    >
                                        {(provided, snapshot) => (
                                            <TableCell
                                                ref={provided.innerRef}
                                                {...provided.draggableProps}
                                                {...provided.dragHandleProps}
                                                className={item?.className}
                                                style={{
                                                    width: item.width,
                                                    minWidth: item.width,
                                                    height: 44,
                                                    ...(item?.style || {})
                                                }}
                                            >
                                                {item.sort
                                                    ? renderItemSortLabel(item)
                                                    : (itemRenderer && itemRenderer(item)) ||
                                                      item[keyName]}
                                            </TableCell>
                                        )}
                                    </Draggable>
                                ))}
                            {provided.placeholder}
                        </TableRow>
                    )}
                </Droppable>
            </DragDropContext>
        </>
    );
};
