const J = { ...jotaiReact, ...jotaiVanilla }
const R = Recoil
const Z = ZeduxReact

let i = 0
const nextId = () => `${++i}`

function makeAtoms(atoms, cb) {
  for (let i = 0; i < 100; i++) {
    atoms.push(cb(atoms[atoms.length - 1]))
  }
}

function initJotai() {
  const store = J.createStore()

  const atoms = [J.atom(0)]
  atoms[0].debugLabel = nextId()

  makeAtoms(atoms, prev => {
    const next = J.atom(get => get(prev) + 1)
    next.debugLabel = nextId()

    return next
  })

  store.sub(atoms[atoms.length - 1], () => {})

  return () => store.set(atoms[0], store.get(atoms[0]) + 1)
}

function initRecoil() {
  const atoms = [
    R.atom({
      key: nextId(),
      default: 0,
    }),
  ]

  makeAtoms(atoms, prev =>
    R.selector({
      key: nextId(),
      get: ({ get }) => get(prev) + 1,
    })
  )

  function Button() {
    const setVal = R.useSetRecoilState(atoms[0])
    return React.createElement('button', {
      id: 'recoil-updater',
      onClick: () => setVal(val => val + 1),
    })
  }

  function Result() {
    const val = R.useRecoilValue(atoms[atoms.length - 1])
    return React.createElement(React.Fragment, {}, val)
  }

  let update

  ReactDOM.render(
    React.createElement(R.RecoilRoot, {}, [
      React.createElement(Button),
      React.createElement(Result),
    ]),
    document.getElementById('recoil-root'),
    () => {
      let el
      update = () => (el ||= document.getElementById('recoil-updater')).click()
    }
  )

  return () => update()
}

function initZedux() {
  const atoms = [Z.atom(nextId(), 0)]

  makeAtoms(atoms, prev => Z.ion(nextId(), ({ get }) => get(prev) + 1))

  const ecosystem = Z.createEcosystem()
  const firstInstance = ecosystem.getInstance(atoms[0])
  const lastInstance = ecosystem.getInstance(atoms[atoms.length - 1])
  lastInstance.store.subscribe(() => {})

  return () => firstInstance.setState(state => state + 1)
}

const updateJotai = initJotai()
const updateRecoil = initRecoil()
const updateZedux = initZedux()