import { AbstractElement, ObservedAttributes, Transformers, atom, a } from '@pesca-dev/atomicity';

// Define your component's attributes
type Attributes = {
  count: number;
};

// Define how to parse attributes from HTML
const transformers: Transformers<Attributes> = {
  count: [(arg) => parseInt(arg, 10), 0], // [parser, default]
};

class CounterElement extends AbstractElement<Attributes> {
  // Create reactive state with atom
  #internalCount = atom(0);

  constructor() {
    super(transformers, false); // false = no shadow DOM
  }

  // Declare which attributes to observe
  static get observedAttributes(): ObservedAttributes<Attributes> {
    return ['count'];
  }

  #increment = () => {
    this.#internalCount.set(this.#internalCount() + 1);
  };

  render() {
    return (
      <div>
        <h2>Counter: {this.#internalCount}</h2>
        <p>Initial count from attribute: {this.attrs.count}</p>
        <button onClick={this.#increment}>
          Increment
        </button>
      </div>
    );
  }
}

// Register the custom element
customElements.define('counter-element', CounterElement);

import { atom, createSignal } from '@pesca-dev/atomicity';

// Create a signal
const count = atom(0);

// Read the value
console.log(count()); // 0

// Update the value
count.set(1);

// Create a computed signal (auto-updates when dependencies change)
createSignal(() => {
  console.log('Count changed to:', count());
});

const items = atom(['Apple', 'Banana', 'Cherry']);

// This list automatically updates when items changes
<ul>
  {() => items().map(item => <li>{item}</li>)}
</ul>

// Reactive attributes
<div id={() => `item-${count()}`}>
  Content
</div>

class MyElement extends AbstractElement<{ name: string; age: number }> {
  constructor() {
    super(
      {
        name: [(s) => s, ''],           // string attribute
        age: [(s) => parseInt(s), 0],   // number attribute
      },
      false // use shadow DOM? (true/false)
    );
  }

  static get observedAttributes() {
    return ['name', 'age'];
  }

  render() {
    // Access reactive attributes via this.attrs
    return (
      <div>
        <p>Name: {this.attrs.name}</p>
        <p>Age: {this.attrs.age}</p>
      </div>
    );
  }
}

class TodoList extends AbstractElement {
  #todos = atom<string[]>([]);
  #input = atom('');

  constructor() {
    super({}, false);
  }

  static get observedAttributes() {
    return [];
  }

  #addTodo = () => {
    if (this.#input()) {
      this.#todos.set([...this.#todos(), this.#input()]);
      this.#input.set('');
    }
  };

  #handleInput = (e: Event) => {
    this.#input.set((e.target as HTMLInputElement).value);
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.#input}
          onInput={this.#handleInput}
        />
        <button onClick={this.#addTodo}>Add</button>
        <ul>
          {() => this.#todos().map(todo => (
            <li>{todo}</li>
          ))}
        </ul>
        <p>Total todos: {this.#todos.length}</p>
      </div>
    );
  }
}

customElements.define('todo-list', TodoList);

class UserProfile extends AbstractElement {
  #isLoggedIn = atom(false);

  constructor() {
    super({}, false);
  }

  static get observedAttributes() {
    return [];
  }

  #toggleLogin = () => {
    this.#isLoggedIn.set(!this.#isLoggedIn());
  };

  render() {
    return (
      <div>
        {() => this.#isLoggedIn()
          ? <p>Welcome back!</p>
          : <p>Please log in</p>
        }
        <button onClick={this.#toggleLogin}>
          {() => this.#isLoggedIn() ? 'Logout' : 'Login'}
        </button>
      </div>
    );
  }
}

customElements.define('user-profile', UserProfile);

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

// Automatically updates when either firstName or lastName changes
<div>
  {() => `${firstName()} ${lastName()}`}
</div>

import { createAtoms } from '@pesca-dev/atomicity';

const state = createAtoms({
  count: 0,
  name: 'Alice',
  isActive: true,
});

// Access like regular atoms
state.count.set(5);
console.log(state.name()); // 'Alice'

const counter = atom(0);
counter();        // Read: returns 0
counter.get();    // Alternative read syntax
counter.set(5);   // Write: sets to 5

const name = atom('World');
createSignal(() => {
  console.log(`Hello, ${name()}!`);
});
// Logs: "Hello, World!"

name.set('Atomicity');
// Logs: "Hello, Atomicity!"

const state = createAtoms({ x: 0, y: 0 });
state.x.set(10);