// The only thing you need to create and use a `simate`
import { createSimate } from 'simate';

// Create simate with initial value of `69` for counter
const countSimate = createSimate(69);

// Manipulate simate. In this case, we increment by 1.
function increment() {
  // Get simate's current value by calling simate.get()
  const currentValue = countSimate.get();
  // Set simate's new value by calling simate.set(newValue)
  countSimate.set(currentValue + 1);
}

// Manipulate simate. In this case, we decrement by 1.
function decrement() {
  // You can also set simate's next value by passing a function. For more info,
  // check the API documentation.
  countSimate.set((prev) => prev - 1);
}

// With our counter example, let's assume we have two buttons. One called
// `increment` other one called `decrement`. When button is clicked we want to
// increment or decrement the count.

// On click event listener to increment the count (simate's value) by 1
document.getElementById('increment').addEventListener('click', increment);

// On click event listener to decrement the count (simate's value) by 1
document.getElementById('decrement').addEventListener('click', decrement);

function doSomethingWhenSimateValueChanges() {
  // Your logic to be exectued whenever `countSimate` value changes, that is
  // whenever countSimate.set() is called.
  //
  // With our counter example, let's assume we want to show the latest value
  // of `countSimate` in a `<h1>` tag with id=`count`
  document.getElementById('count').innerHTML = countSimate.get();
}

// Attach a function( listener/callback ) that you want to be called every time
// the simate's value changes. In context to our example,
// `doSomethingWhenSimateValueChanges` will be called whenever `increment` or
// `decrement` functions are called because they manipulate the simate's value.
// You can `attach` as many callback functions as you want.
const listener = countSimate.attach(doSomethingWhenSimateValueChanges);

function detach() {
  // You can detach a listener from a simate as well by calling `detach` on the
  // object returned by `simate.attach(function)`.
  // This can be handy to improve performance or for some specific use case.
  listener.detach();
}

// Another use-case can be to detach listener whenever your react component is
// unmounted and attach the listener when it's mounted. This is the
// implementation of `useSimate` react hook.
document.addEventListener('beforeunload', detach);