import React from 'react';
import Link from 'next/link';
import moment from 'moment';
import ListActionsPopover from '../ListActionsPopover';
import { DragSourceMonitor, useDrag } from 'react-dnd';

type Props = {
    item: any;
    column: { id: string; label: string };
    entityName: string;
    showFieldName: string;
    setItemIdToDelete: (id: string) => void;
};

const KanbanCard = ({
                        item,
                        entityName,
                        showFieldName,
                        setItemIdToDelete,
                        column,
                    }: Props) => {
    const [{ isDragging }, drag] = useDrag(
        () => ({
            type: 'box',
            item: { item, column },
            collect: (monitor: DragSourceMonitor) => ({
                isDragging: monitor.isDragging(),
            }),
        }),
        [item],
    );

    return (
        <div
            ref={drag}
            className={
                `bg-midnightBlueTheme-cardColor  dark:bg-dark-800 rounded-md space-y-2 p-4 relative ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`
            }
        >
            <div className={'flex items-center justify-between'}>
                <Link
                    href={`/${entityName}/${entityName}-view/?id=${item.id}`}
                    className={'text-base font-semibold'}
                >
                    {item[showFieldName] ?? 'No data'}
                </Link>
            </div>
            <div className={'flex items-center justify-between'}>
                <p>{moment(item.createdAt).format('MMM DD hh:mm a')}</p>
                <ListActionsPopover
                    itemId={item.id}
                    pathEdit={`/${entityName}/${entityName}-edit/?id=${item.id}`}
                    pathView={`/${entityName}/${entityName}-view/?id=${item.id}`}
                    onDelete={(id) => setItemIdToDelete(id)}
                    hasUpdatePermission={true}
                    className={'w-2 h-2 text-white'}
                    iconClassName={'w-5'}
                />
            </div>
        </div>
    );
};

export default KanbanCard;
