import { createEvent, createSubject, halt } from '@doeixd/events';

// Basic event system
const [onEvent, emitEvent] = createEvent<string>();

onEvent(payload => console.log(`Event emitted:`, payload));

emitEvent('Hello World!');
// logs "Event emitted: Hello World!"

// Event transformation and chaining
const [onIncrement, emitIncrement] = createEvent<number>();

const onMessage = onIncrement((delta) => `Increment by ${delta}`);
onMessage(message => console.log(`Message emitted:`, message));

emitIncrement(2);
// logs "Message emitted: Increment by 2"

// Conditional halting
const onValidIncrement = onIncrement(delta => delta > 0 ? delta : halt());
const onFinalMessage = onValidIncrement((delta) => `Valid increment: ${delta}`);
onFinalMessage(message => console.log(message));

emitIncrement(-1); // No output (halted)
emitIncrement(5);  // logs "Valid increment: 5"

// Reactive subjects
const count = createSubject(0);
count.subscribe((value) => console.log('Count is now:', value));

count(1); // logs "Count is now: 1"
console.log(count()); // 1

import { createEvent, halt } from '@doeixd/events';

// Create typed events
const [onMessage, emitMessage] = createEvent<string>();
const [onCount, emitCount] = createEvent<number>();

// Conditional halting
onCount((n) => {
  if (n < 0) halt(); // Stop processing
  console.log('Processing:', n);
});

emitCount(5);  // Logs: Processing: 5
emitCount(-1); // No log (halted)

import { createSubject } from 'events';

const user = createSubject({
  name: 'John',
  age: 30
});

// Get current value
console.log(user().name); // 'John'

// Update and notify subscribers
user({ ...user(), age: 31 });

// Subscribe to changes
user.subscribe((newUser) => {
  console.log('User updated:', newUser);
});

import { events } from '@remix-run/events';
import { dom, halt, toEventDescriptor } from '@doeixd/events';

// Assume we have a form element in the DOM
const formElement = document.querySelector('form')!;
const emailInput = formElement.querySelector('input[name="email"]')!;

// 1. Create a reactive event chain from the DOM event.
const onSubmit = dom.submit(formElement);

// 2. Chain 1: Prevent default browser submission.
const onSafeSubmit = onSubmit(event => {
  event.preventDefault();
  return event; // Pass the event down the chain
});

// 3. Chain 2: Validate the email. If invalid, halt the chain.
const onValidatedSubmit = onSafeSubmit(() => {
  if (emailInput.value.includes('@')) {
    return { email: emailInput.value }; // Pass validated data
  }
  console.log('Validation failed!');
  return halt(); // Stop processing
});

// 4. Create the final Remix EventDescriptor from our powerful chain.
const submitDescriptor = toEventDescriptor(onValidatedSubmit, 'submit');

// 5. Attach the descriptor using Remix's events() function.
const cleanup = events(formElement, [submitDescriptor]);

// Later, when the component unmounts...
// cleanup();

import { createInteraction, events } from '@remix-run/events';
import { createEvent, dom, halt, toEventDescriptor } from '@doeixd/events';

// The Interaction factory
export const doubleClick = createInteraction('doubleClick', ({ target, dispatch }) => {
  let timer: number;
  const [onClick, emitClick] = createEvent<MouseEvent>();

  // 1. Core Logic using @doeixd/events:
  //    - Start with the raw click events.
  //    - If a timer is running, it's a double click. Clear the timer and pass the event through.
  //    - If no timer, start one and halt the chain.
  const onDoubleClick = onClick(event => {
    if (timer) {
      clearTimeout(timer);
      timer = 0;
      return event; // This is a double click!
    } else {
      timer = setTimeout(() => (timer = 0), 300);
      return halt(); // This is the first click.
    }
  });

  // 2. Dispatch the custom Remix event when a double click occurs.
  onDoubleClick(() => dispatch());

  // 3. Bridge the raw DOM click to our internal event emitter.
  const clickDescriptor = toEventDescriptor(
    dom.click(target)(e => emitClick(e)),
    'click'
  );

  // 4. Attach the listener using Remix's events() and return the cleanup.
  return events(target, [clickDescriptor]);
});

// --- How to use it ---
// Now you have a clean, reusable `doubleClick` interaction.
const button = document.querySelector('button')!;
events(button, [
  doubleClick(() => {
    console.log('Double click detected!');
  }),
]);

import { events, dom, press } from '@doeixd/events';

const button = document.getElementById('my-button');

// 1. Create an event container for the element
const buttonEvents = events(button);

// 2. Declaratively attach a set of listeners
buttonEvents.on([
  // Attach a standard DOM event listener
  dom.click(event => {
    console.log('Button was clicked!');
  }),

  // Attach a high-level, built-in interaction
  press(event => {
    // This fires for mouse clicks, touch taps, and Enter/Space key presses
    console.log(`Button was "pressed" via a ${event.detail.originalEvent.type} event.`);
  })
]);

// 3. To remove all listeners managed by the container:
// buttonEvents.cleanup();

function SmartLink({ href, onClick }) {
  const linkEvents = events(linkElement);

  linkEvents.on([
    // 1. The consumer's onClick runs first.
    dom.click(event => {
      if (shouldCancelNavigation()) {
        // This will stop our navigation logic below.
        event.preventDefault();
      }
      onClick(event);
    }),

    // 2. Our component's default behavior runs second.
    dom.click(event => {
      // This code will not run if the consumer called preventDefault().
      console.log('Navigating to', href);
      navigateTo(href);
    })
  ]);
}

import { createInteraction, dom } from '@doeixd/events';

// 1. Define the interaction
const longPress = createInteraction<Element, { duration: number }>(
  'longpress', // The name of the custom event it will dispatch
  ({ target, dispatch }) => {
    let timer;

    // Use our core `dom` helpers and subscription stack for robust logic
    const onMouseDown = dom.mousedown(target);
    const onMouseUp = dom.mouseup(window); // Listen on window to catch mouseup anywhere

    const downSub = onMouseDown(e => {
      const startTime = Date.now();
      timer = setTimeout(() => {
        dispatch({ detail: { duration: Date.now() - startTime } });
      }, 500);
    });

    const upSub = onMouseUp(() => clearTimeout(timer));

    // The factory must return its cleanup functions
    return [downSub, upSub];
  }
);

// 2. Use the new interaction
events(myElement, [
  longPress(e => {
    console.log(`Element was long-pressed for ${e.detail.duration}ms!`);
  })
]);

const [onIncrement, emitIncrement] = createEvent<number>();
const [onReset, emitReset] = createEvent();

const count = createSubject(0,
  onIncrement(delta => currentCount => currentCount + delta),
  onReset(() => 0)
);

const [onRefresh, emitRefresh] = createEvent();
const user = createAsyncSubject(
  () => fetch('/api/user').then(res => res.json()), // Initial load
  onRefresh(() => fetch('/api/user').then(res => res.json())) // Re-fetch
);

const [onAddItem, emitAddItem] = createEvent<string>();
const cart = createSubjectStore({ items: [] },
  onAddItem(item => state => {
    state.items.push(item); // Directly mutate state
  })
);

const [onLogin, emitLogin] = createEvent<string>();
const [onLogout, emitLogout] = createEvent();

const onAuthChange = createTopic(
  onLogin(user => `User logged in: ${user}`),
  onLogout(() => 'User logged out')
);

const [onNumber, emitNumber] = createEvent<number>();

const [onPositive, onNegativeOrZero] = createPartition(
  onNumber,
  (num) => num > 0
);

function MyComponent() {
  const [count, setCount] = useState(0);
  const [onIncrement, emitIncrement] = createEvent<number>();

  useEffect(() => {
    const unsub = onIncrement((delta) => setCount(c => c + delta));
    return unsub;
  }, []);

  return <button onClick={() => emitIncrement(1)}>Count: {count}</button>;
}

<template>
  <button @click="emitIncrement(1)">Count: {{ count }}</button>
</template>

<script setup>
import { createEvent, createSubject } from '@doeixd/events';

const [onIncrement, emitIncrement] = createEvent<number>();
const count = createSubject(0);

onIncrement((delta) => count(count() + delta));
</script>

import { createSubject, batch } from '@doeixd/events';

// Per-subject batching (batches individual updates)
const user = createSubject(null, { batch: true });

// Manual batching (batch multiple operations)
batch(() => {
  firstName('John');
  lastName('Doe'); // All notifications happen once at end
});

// Fully typed event system
const [onUserAction, emitUserAction] = createEvent<{ type: 'click' | 'hover'; target: Element }>();

// Type-safe chaining
const onValidatedAction = onUserAction((action) => {
  if (action.type === 'click') return action.target; // Inferred return type: Element
  return halt(); // Type-safe halting
});

// Subject with inferred state type
const user = createSubject({ name: 'John', age: 30 });
user.subscribe((u) => console.log(u.name)); // u is fully typed

import { fromDomEvent, dom, subjectProperty, on } from '@doeixd/events';

// Direct DOM event handling
const clickHandler = dom.click(buttonElement);
clickHandler(() => console.log('Clicked!'));

// Reactive DOM properties
const inputValue = subjectProperty(inputElement, 'value');
inputValue.subscribe((value) => {
  console.log('Input changed:', value);
});

// Multi-element handling
on([button1, button2, button3], 'click', () => {
  console.log('Button clicked!');
});

import { subjectProperty, dom } from '@doeixd/events';

function createReactiveForm() {
  const form = document.createElement('form');

  // Reactive inputs
  const nameInput = document.createElement('input');
  const emailInput = document.createElement('input');

  const name = subjectProperty(nameInput, 'value');
  const email = subjectProperty(emailInput, 'value');

  // Reactive validation
  const isValid = createSubject(false);
  combineLatest(name, email).subscribe(([n, e]) => {
    isValid(n.length > 0 && e.includes('@'));
  });

  // Submit handler
  const submitHandler = dom.submit(form);
  submitHandler((e) => {
    e.preventDefault();
    if (isValid()) {
      console.log('Submit:', { name: name(), email: email() });
    }
  });

  return { form, name, email, isValid };
}

import { on } from '@doeixd/events';

const buttons = document.querySelectorAll('.my-button');
on(buttons, 'click', (event) => {
  console.log('Button clicked:', event.target);
});

import { fromDomEvent } from '@doeixd/events';

const container = document.getElementById('container');
const clickHandler = fromDomEvent(container, 'click');

clickHandler((event) => {
  if (event.target.matches('.item')) {
    console.log('Item clicked:', event.target.dataset.id);
  }
});

import { fromDomEvent } from '@doeixd/events';

// Bubbling phase (default)
const bubblingHandler = fromDomEvent(childElement, 'click');
bubblingHandler((event) => {
  console.log('Bubbling phase');
});

// Capturing phase
const capturingHandler = fromDomEvent(parentElement, 'click', { capture: true });
capturingHandler((event) => {
  console.log('Capturing phase');
});

import { dom } from '@doeixd/events';

const mouseHandler = dom.mousemove(document.body);
mouseHandler((event) => {
  console.log('Mouse at:', event.clientX, event.clientY);
  console.log('Target:', event.target);
  console.log('Current target:', event.currentTarget);
});

// Access all native event properties
const keyHandler = dom.keydown(window);
keyHandler((event) => {
  console.log('Key pressed:', event.key);
  console.log('Code:', event.code);
  console.log('Ctrl pressed:', event.ctrlKey);
});

import { dom } from '@doeixd/events';

const formHandler = dom.submit(formElement);
formHandler((event) => {
  event.preventDefault(); // Prevent form submission
  event.stopPropagation(); // Stop DOM event bubbling

  // Handle form submission
  console.log('Form submitted');
});

// Stop immediate propagation (prevents other handlers on same element)
const buttonHandler = dom.click(button, { capture: true });
buttonHandler((event) => {
  event.stopImmediatePropagation();
  console.log('This handler runs first and prevents others');
});

import { createEvent, halt } from '@doeixd/events';

const [onNumber, emitNumber] = createEvent<number>();

// Chain with conditional halting
const onProcessed = onNumber((n) => {
  if (n < 0) halt(); // Stop this chain
  return n * 2;
});

onProcessed((result) => console.log('Result:', result));

emitNumber(5);  // Logs: Result: 10
emitNumber(-1); // No output (halted)

import { createEvent, createTopic, halt } from '@doeixd/events';

const [onEvent, emitEvent] = createEvent<number>();

// Multiple independent handlers (each isolated)
const handler1 = onEvent((n) => {
  if (n < 0) halt(); // Only stops handler1
  console.log('Handler 1:', n);
});

const handler2 = onEvent((n) => {
  console.log('Handler 2:', n); // Always runs
});

// Composed handlers (halt affects the composed result)
const composed = createTopic(
  onEvent((n) => n < 0 ? halt() : n),
  onEvent((n) => `Result: ${n}`)
);

composed((result) => console.log(result));

emitEvent(5);   // Handler 1: 5, Handler 2: 5, Result: 5
emitEvent(-1);  // Handler 1: (halted), Handler 2: -1, (composed halted)

import { fromDomEvent } from '@doeixd/events';

// Passive listeners (improves scroll performance)
const scrollHandler = fromDomEvent(window, 'scroll', { passive: true });
scrollHandler(() => {
  // This won't block scrolling
  console.log('Scrolled');
});

// Once-only listeners
const clickOnceHandler = fromDomEvent(button, 'click', { once: true });
clickOnceHandler(() => {
  console.log('This will only fire once');
});

// Combined options
const advancedHandler = fromDomEvent(element, 'touchstart', {
  capture: true,
  passive: false,
  signal: abortController.signal
});

import { fromDomEvent } from '@doeixd/events';

// Listen for custom events
const customHandler = fromDomEvent(window, 'my-custom-event' as any);
customHandler((event: CustomEvent) => {
  console.log('Custom event data:', event.detail);
});

// Dispatch custom events
const customEvent = new CustomEvent('my-custom-event', {
  detail: { message: 'Hello!' }
});
window.dispatchEvent(customEvent);

import { fromDomEvent } from '@doeixd/events';

// Delegate to parent element
const listHandler = fromDomEvent(document.getElementById('list'), 'click');
listHandler((event) => {
  const target = event.target as HTMLElement;

  // Handle different child elements
  if (target.matches('.delete-btn')) {
    const itemId = target.dataset.id;
    deleteItem(itemId);
  } else if (target.matches('.edit-btn')) {
    const itemId = target.dataset.id;
    editItem(itemId);
  }
});

// Multiple event types on same element
const multiHandler = fromDomEvent(container, 'click');
multiHandler((event) => {
  if (event.target.matches('button')) {
    handleButtonClick(event);
  } else if (event.target.matches('a')) {
    handleLinkClick(event);
  }
});

import { fromDomEvent, dom } from '@doeixd/events';

// Use passive listeners for scroll/touch events
const touchHandler = dom.touchmove(document.body, { passive: true });

// Debounce high-frequency events
let scrollTimeout: number;
const scrollHandler = dom.scroll(window, { passive: true });
scrollHandler(() => {
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(() => {
    console.log('Scroll settled');
  }, 100);
});

// Use AbortController for cleanup
const controller = new AbortController();
const handler = fromDomEvent(button, 'click', { signal: controller.signal });

// Later: controller.abort(); // Removes the listener

import { createEvent, Handler } from 'events';

// Custom event emitter class
class EventEmitter<T extends Record<string, any>> {
  private events = new Map<keyof T, Handler<T[keyof T]>>();

  on<K extends keyof T>(event: K, handler: Handler<T[K]>) {
    const [h, emit] = createEvent<T[K]>();
    h(handler);
    this.events.set(event, h);
    return emit;
  }

  emit<K extends keyof T>(event: K, data: T[K]) {
    const handler = this.events.get(event);
    if (handler) {
      // Trigger the handler with data
      // Implementation details...
    }
  }
}

import { createSubject, subjectProperty } from '@doeixd/events';

function useFormValidation() {
  const email = subjectProperty(emailInput, 'value');
  const password = subjectProperty(passwordInput, 'value');

  const errors = createSubject({ email: '', password: '' });

  // Reactive validation
  email.subscribe((value) => {
    const isValid = /^[^@]+@[^@]+\.[^@]+$/.test(value);
    errors({ ...errors(), email: isValid ? '' : 'Invalid email' });
  });

  password.subscribe((value) => {
    const isValid = value.length >= 8;
    errors({ ...errors(), password: isValid ? '' : 'Password too short' });
  });

  return { email, password, errors };
}

import { createAsyncSubject, createEvent } from '@doeixd/events';

function usePosts() {
  const [onRefresh, emitRefresh] = createEvent();
  const [onDelete, emitDelete] = createEvent<number>();

  const posts = createAsyncSubject(
    () => api.getPosts(), // Initial load
    onRefresh(() => api.getPosts()), // Manual refresh
    onDelete((id) => (currentPosts) =>
      currentPosts.filter(p => p.id !== id) // Optimistic update
    )
  );

  return { posts, refresh: emitRefresh, deletePost: emitDelete };
}

// Function to emit events with data of type T
type Emitter<T> = (data?: T) => void;

// Higher-order function for handling events
type Handler<T> = <R>(
  cb: (data: T) => R | Promise<R> | void | Promise<void>
) => R extends void | Promise<void> ? Unsubscribe : Handler<Awaited<R>>;

// Unsubscribe function returned by handlers
type Unsubscribe = () => void;

// Reactive subject interface
interface Subject<S> {
  (value?: S): S;
  subscribe(cb: (value: S) => void): Unsubscribe;
  dispose?: () => void;
}

handler((data: T, meta?: { signal: AbortSignal }) => void)

const [onMessage, emitMessage] = createEvent<string>();

// Basic usage (meta parameter optional)
onMessage((msg) => console.log('Received:', msg));
emitMessage('Hello World!'); // Logs: Received: Hello World!

// Async safety with AbortSignal
onMessage(async (msg, meta) => {
  if (meta?.signal.aborted) return; // Check if already aborted

  try {
    await someAsyncOperation(msg, meta.signal); // Pass signal for cancellation
  } catch (err) {
    if (err.name === 'AbortError') return; // Handle cancellation
    throw err;
  }
});

// When emitMessage is called again, previous async operations are automatically aborted
emitMessage('New message'); // Aborts previous async operation