/**
 * Memorio useObserver Example
 *
 * This example demonstrates the useObserver hook for React.
 * useObserver automatically tracks state changes and triggers re-renders.
 *
 * Note: This example requires React to be present in the environment.
 * Run in a React environment.
 */

import 'memorio'

// ============================================
// BASIC USEOBSERVER
// ============================================

// Example 1: Watch single value
useObserver(callback, [state.value])

function Counter() {
  useObserver(() => {
    console.debug('Count changed:', state.count)
  }, [state.count])

  return <div>{state.count} </div>
}

// ============================================
// MULTIPLE DEPENDENCIES
// ============================================

// Example 2: Watch multiple values
function UserProfile() {
  useObserver(() => {
    console.debug('User or theme changed')
  }, [state.user, state.theme])

  return <div>{state.user.name} </div>
}

// ============================================
// AUTO-DISCOVERY
// ============================================

// Example 3: No dependencies - auto-discovers all state access
function AutoDiscovery() {
  useObserver(() => {
    // Automatically tracks state.user, state.items, state.count
    console.debug('Changed:', state.user.name, state.items.length, state.count)
  })

  return <div>{state.user.name} </div>
}

// ============================================
// SYNC WITH USESTATE
// ============================================

// Example 4: Sync with useState
function SyncedComponent() {
  const [localData, setLocalData] = useState(null)

  useObserver((newValue) => {
    setLocalData(newValue)
  }, [state.data])

  return <div>{localData} </div>
}

// ============================================
// PRACTICAL EXAMPLE
// ============================================

// Real-world React component example:
import 'memorio'

function TodoApp() {
  // Track todos
  useObserver(() => {
    console.debug('Todos updated:', state.todos)
    // Optionally save to store
    store.set('todos', state.todos)
  }, [state.todos])

  // Track filter
  useObserver(() => {
    console.debug('Filter changed:', state.filter)
  }, [state.filter])

  const addTodo = (text) => {
    state.todos = [...(state.todos || []), { text, done: false }]
  }

  const toggleTodo = (index) => {
    const todos = [...state.todos]
    todos[index].done = !todos[index].done
    state.todos = todos
  }

  const filteredTodos = (state.todos || []).filter(t =>
    state.filter === 'all' ||
    (state.filter === 'done' && t.done) ||
    (state.filter === 'todo' && !t.done)
  )

  return (
    <div>
      <select
        value={state.filter}
        onChange={e => state.filter = e.target.value}
      >
        <option value="all" > All </option>
        < option value="done" > Done </option>
        < option value="todo" > Todo </option>
      </select>
      <ul>
        {
          filteredTodos.map((todo, i) => (
            <li
              key={i}
              onClick={() => toggleTodo(i)}
              style={{ textDecoration: todo.done ? 'line-through' : 'none' }
              }
            >
              {todo.text}
            </li>
          ))}
      </ul>
      < input
        onKeyDown={e => {
          if (e.key === 'Enter') {
            addTodo(e.target.value)
            e.target.value = ''
          }
        }}
      />
    </div>
  )
}

console.debug('useObserver example - run in React environment!')