import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { ListItem, ListItemText, ListItemButton, ListItemIcon} from '@mui/material';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';

interface SortableItemProps {
   item: string;
   id: string;// чтобы тайпскрипт компилятор не жаловался, добавил в инетрфейс, хотя и так компилируется нормально
   isDisabled:boolean;
}

export function SortableItem({ item ,isDisabled}: SortableItemProps) {
      const id = item; /* идентификатор для useSortable */
      const {
        attributes,
        listeners,
        setNodeRef,
        transform,
        transition,
      } = useSortable({ id });

      const style = {
        transform: CSS.Transform.toString(transform),
        transition,
      };

      return (
        <ListItem ref={ isDisabled ? undefined : setNodeRef } style={ style } { ...attributes } { ...listeners }>
          <ListItemButton
              sx={{
              border: '1px solid gray',
              borderRadius: '5px',
            }}>
            <ListItemIcon>
              <DragIndicatorIcon />
            </ListItemIcon>
            <ListItemText primary={ item } />
          </ListItemButton>
        </ListItem>
      );
    }