import { resin, bind } from '@resin-js/core';

// Create reactive state
const counter = resin(0);

// Bind to DOM
bind(document.querySelector('.counter'), counter);

// Updates automatically
counter.value++; // DOM updates instantly

// Simple values
const count = resin(0);

// Complex objects
const user = resin({
    name: 'John',
    settings: {
        theme: 'dark',
        notifications: true
    }
});

// Arrays
const todos = resin([
    { id: 1, text: 'Learn Resin', done: false }
]);

// Maps
const userMap = resin(new Map());

// Basic binding
bind(element, state);

// Conditional rendering
bind(element, state, {
    if: value => value > 0
});

// Value transformation
bind(element, state, {
    map: value => `Count: ${value}`
});

// Class bindings
bind(element, state, {
    class: {
        'active': value => value.isActive,
        'disabled': value => !value.isEnabled
    }
});

// Attribute bindings
bind(element, state, {
    attr: {
        'disabled': value => !value.isValid,
        'aria-expanded': value => value.isOpen
    }
});

const todos = resin([
    { id: 1, text: 'Learn Resin', done: false },
    { id: 2, text: 'Build app', done: true }
]);

// Reactive filtering
const activeTodos = todos.filterResin(todo => !todo.done);

// Reactive mapping
const todoTexts = todos.mapResin(todo => todo.text);

// Reactive find
const firstActive = todos.findResin(todo => !todo.done);

// Sorted view
const sortedTodos = todos.sortedResin((a, b) => a.id - b.id);

// Regular array operations work too
todos.value.push({ id: 3, text: 'New todo', done: false });

const users = resin(new Map([
    ['user1', { name: 'John', age: 30 }]
]));

// Reactive get
const user1 = users.getResin('user1');

// Reactive entries
const entries = users.entriesResin();

// Regular Map operations work
users.value.set('user2', { name: 'Jane', age: 25 });

state.on('init', ({ value }) => {
    console.log('Initial value:', value);
});

state.on('change', ({ value, oldValue }) => {
    console.log('Value changed:', oldValue, '->', value);
});

state.on('error', ({ error }) => {
    console.error('Error occurred:', error);
});

import { computed } from '@resin-js/core';

const firstName = resin('John');
const lastName = resin('Doe');

const fullName = computed(() => 
    `${firstName.value} ${lastName.value}`
);

import { batch } from '@resin-js/core';

batch(() => {
    state1.value = newValue1;
    state2.value = newValue2;
    // DOM updates once at the end
});

const settings = resin({
    theme: 'light'
}, {
    persist: {
        key: 'app-settings',
        // Optional custom serialization
        serialize: JSON.stringify,
        deserialize: JSON.parse
    }
});

const form = resin({
    email: ''
}, {
    validate: value => ({
        valid: value.email.includes('@'),
        error: 'Invalid email format'
    })
});

const input = resin('', {
    transform: [
        value => value.trim(),
        value => value.toLowerCase()
    ]
});