import { Tick02Icon, CheckListIcon } from '@zen/core/shared/icons';
import { newBlockId } from '../utils/ids.js';

// Préfixe : case à cocher cliquable. `onPatch({ checked })` mute l'état du
// bloc (consommé par BlockEditor → handleBlockPatch).
function Checkbox({ block, onPatch, disabled }) {
  function toggle(e) {
    e.preventDefault();
    e.stopPropagation();
    if (disabled) return;
    onPatch?.({ checked: !block.checked });
  }
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={!!block.checked}
      tabIndex={-1}
      onMouseDown={(e) => e.preventDefault()}
      onClick={toggle}
      disabled={disabled}
      className={`select-none mt-[0.45em] mr-2 flex-shrink-0 w-4 h-4 rounded border flex items-center justify-center transition-colors ${
        block.checked
          ? 'bg-blue-600 border-blue-600 text-white'
          : 'border-neutral-400 dark:border-neutral-500 hover:border-blue-500'
      }`}
    >
      {block.checked && <Tick02Icon width={12} height={12} />}
    </button>
  );
}

const Checklist = {
  type: 'checklist',
  label: 'Case à cocher',
  icon: <CheckListIcon width={18} height={18} />,
  keywords: ['checklist', 'todo', 'tache', 'tâche', 'case', 'cocher', 'check'],
  shortcut: '[] ',
  isText: true,
  textTag: 'div',
  textClassName: 'text-base leading-relaxed text-neutral-900 dark:text-white',
  placeholder: 'À faire…',
  renderPrefix({ block, onPatch, disabled }) {
    return <Checkbox block={block} onPatch={onPatch} disabled={disabled} />;
  },
  create(init = {}) {
    return { id: newBlockId(), type: 'checklist', content: [], checked: false, ...init };
  },
};

export default Checklist;
