'use client';

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { DailyCheckbox, DailyCheckboxType } from '@/lib/types';
import { DailyCheckboxItem } from './DailyCheckboxItem';

interface DailyCheckboxSortableProps {
  checkbox: DailyCheckbox;
  onToggle: (checkboxId: string) => Promise<void>;
  onUpdate: (checkboxId: string, text: string, type: DailyCheckboxType, taskId?: string) => Promise<void>;
  onDelete: (checkboxId: string) => Promise<void>;
  saving?: boolean;
}

export function DailyCheckboxSortable({
  checkbox,
  onToggle,
  onUpdate,
  onDelete,
  saving = false
}: DailyCheckboxSortableProps) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id: checkbox.id,
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`
        ${isDragging ? 'z-50' : 'z-0'}
        ${isDragging ? 'shadow-lg' : ''}
        transition-shadow duration-200
      `}
    >
      <div className="relative group">
        {/* Handle de drag */}
        <div 
          {...attributes} 
          {...listeners}
          className="absolute left-0 top-0 bottom-0 w-3 cursor-grab active:cursor-grabbing flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
          title="Glisser pour réorganiser"
        >
          <div className="w-1.5 h-6 flex flex-col justify-center gap-0.5">
            <div className="w-full h-0.5 bg-[var(--muted-foreground)] rounded"></div>
            <div className="w-full h-0.5 bg-[var(--muted-foreground)] rounded"></div>
            <div className="w-full h-0.5 bg-[var(--muted-foreground)] rounded"></div>
          </div>
        </div>
        
        {/* Checkbox item avec padding left pour le handle */}
        <div className="pl-4">
          <DailyCheckboxItem
            checkbox={checkbox}
            onToggle={onToggle}
            onUpdate={onUpdate}
            onDelete={onDelete}
            saving={saving}
          />
        </div>
      </div>
    </div>
  );
}