// Caja de herramientas con tipos de preguntas disponibles
// Funcionalidades:
// - Lista de elementos arrastrables
// - Tipos disponibles: Título, Pregunta Simple, Opción Múltiple, Opción Única, Selección
// - Cada elemento es arrastrable al área de construcción
'use client';

import { Card, CardContent } from '@repo/shadcn/card';
import { QuestionType } from '../../schemas/survey';
import { useDraggable } from '@dnd-kit/core';
import { CSS } from '@dnd-kit/utilities';

const questionTypes = [
  {
    type: QuestionType.TITLE,
    label: 'Título',
    icon: '📝',
  },
  {
    type: QuestionType.SIMPLE,
    label: 'Pregunta Simple',
    icon: '✏️',
  },
  {
    type: QuestionType.MULTIPLE_CHOICE,
    label: 'Opción Múltiple',
    icon: '☑️',
  },
  {
    type: QuestionType.SINGLE_CHOICE,
    label: 'Opción Única',
    icon: '⭕',
  },
  {
    type: QuestionType.SELECT,
    label: 'Selección',
    icon: '📋',
  },
];

function DraggableItem({ type, label, icon }: { type: string; label: string; icon: string }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: type,
    data: {
      type,
      isTemplate: true,
    },
  });

  const style = transform ? {
    transform: CSS.Translate.toString(transform),
  } : undefined;

  return (
    <div
      ref={setNodeRef}
      style={style}
      {...listeners}
      {...attributes}
      className="p-3 bg-background border rounded-lg cursor-move hover:bg-accent touch-none"
    >
      <div className="flex items-center gap-2">
        <span>{icon}</span>
        <span>{label}</span>
      </div>
    </div>
  );
}

export function QuestionToolbox() {
  return (
    <Card>
      <CardContent className="p-4">
        <h3 className="font-semibold mb-4">Elementos Disponibles</h3>
        <div className="space-y-2">
          {questionTypes.map((item) => (
            <DraggableItem
              key={item.type}
              type={item.type}
              label={item.label}
              icon={item.icon}
            />
          ))}
        </div>
      </CardContent>
    </Card>
  );
}