import Selectables from 'selectables';
import 'selectables/css';

const selectable = new Selectables({
    zone: '#my-container',
    elements: '.selectable-item',
    onSelect: (element) => {
        console.log('Selected:', element);
    }
});

const Selectables = require('selectables');

const selectable = new Selectables({
    zone: '#my-container',
    elements: '.selectable-item'
});

// Enable/disable selection
selectables.enable();
selectables.disable();
selectables.destroy();  // Cleanup all listeners

// Check state
selectables.isEnabled();  // boolean

// Programmatic selection
selectables.select('.item');           // Select by selector
selectables.select(element);           // Select single element
selectables.select([el1, el2]);        // Select multiple

selectables.deselect('.item');         // Deselect by selector
selectables.selectAll();               // Select all items
selectables.deselectAll();             // Clear selection
selectables.invertSelection();         // Invert current selection
selectables.toggle('.item');           // Toggle specific items

// Get selection
const selected = selectables.getSelected();        // Array of HTMLElements
const count = selectables.getSelectedCount();      // Number
const total = selectables.getItemCount();          // Total items

// Update options at runtime
selectables.setOptions({ 
    selectedClass: 'custom-selected',
    minDragDistance: 10 
});

// Get current options
const options = selectables.getOptions();

selectables
    .enable()
    .selectAll()
    .invertSelection()
    .disable();

const selectable = new Selectables({
    zone: '#container',
    elements: 'li',
    onSelect: (el) => console.log('Selected:', el.textContent)
});

new Selectables({
    zone: '#container',
    elements: '.item',
    key: 'altKey',  // Must hold Alt to select
    start: () => console.log('Selection started with Alt key')
});

new Selectables({
    zone: '#container',
    elements: '.item',
    moreUsing: 'shiftKey',  // Hold Shift to add to selection
    selectedClass: 'highlighted'
});

new Selectables({
    zone: '#gallery',
    elements: '.photo',
    tolerance: 'fit',  // Only select when fully inside selection box
    minDragDistance: 5,  // Prevent accidental selections
    onChange: (selected) => {
        console.log(`Selected ${selected.length} photos`);
    }
});

new Selectables({
    zone: '#container',
    elements: '.item',
    scrollOnEdge: true,
    scrollSpeed: 15,
    scrollEdgeSize: 50
});

new Selectables({
    zone: '#list',
    elements: 'li',
    onSelect: (el) => {
        el.querySelector('input[type="checkbox"]').checked = true;
    },
    onDeselect: (el) => {
        el.querySelector('input[type="checkbox"]').checked = false;
    }
});

const selectable = new Selectables({
    zone: '#container',
    elements: '.item',
    enabled: false  // Start disabled
});

// Enable only when user is ready
document.getElementById('enableBtn').addEventListener('click', () => {
    selectable.enable();
});

// Programmatic control
document.getElementById('selectAllBtn').addEventListener('click', () => {
    selectable.selectAll();
});

document.getElementById('invertBtn').addEventListener('click', () => {
    selectable.invertSelection();
});

// v1.x
dr = new Selectables({...});

// v2.0 - Same API, but now with more methods
const selectable = new Selectables({...});

// New methods available
selectable.getSelected();
selectable.selectAll();
selectable.invertSelection();
selectable.destroy();  // Important: cleanup when done