import React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import PageRow from '../flexView/pagelists/pagerow/PageRow';
import { Page } from '../../db/pages';

interface SortablePageRowProps {
  id: number;
  page: Page;
  windowId: number;
  tabId: number;
}

const SortablePageRow = ({ id, page, windowId, tabId }: SortablePageRowProps) => {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });

  return (
    <div
      ref={setNodeRef}
      style={{
        transform: CSS.Transform.toString(transform),
        transition,
        opacity: isDragging ? 0.35 : 1,
        display: 'flex',
        alignItems: 'center',
      }}
    >
      <div
        {...attributes}
        {...listeners}
        style={{
          cursor: isDragging ? 'grabbing' : 'grab',
          color: '#555',
          padding: '2px 4px',
          userSelect: 'none',
          flexShrink: 0,
          fontSize: '0.75rem',
          lineHeight: 1,
        }}
        title="Drag to reorder"
      >
        ⠿
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <PageRow page={page} windowId={windowId} tabId={tabId} />
      </div>
    </div>
  );
};

export default SortablePageRow;