import * as React from 'react'
import { F, Atom } from '@grammarly/focal'
import { of } from 'rxjs'

let globalCounter = 0

function mkName() {
  return (++globalCounter).toString()
}

const El = ({ text = '', ts = '' }) => {
  return <F.div>
    El #{text} (render #{ts})
    {of(undefined)}
  </F.div>
}

const ElWithHover = ({ text = '' }) => {
  const ts = mkName()
  console.log('RENDERED', ts)

  const hovered = Atom.create(false)

  return <F.div
    onMouseEnter={() => hovered.set(true)}
    onMouseLeave={() => hovered.set(false)}
  >
    El #{text} (render #{ts}) is&nbsp;
    {hovered.view(x => {
      console.log('VIEW', ts, x)
      return x ? 'hovered' : 'NOT hovered'
    })}
  </F.div>
}

const MinimalReproduce = () => {
  const state = Atom.create([0])

  return <F.div>
    <h2>The hover does not work after you add an item</h2>

    <button onClick={_ => state.modify(s => ([] as number[]).concat(s.concat([s.length])))}>
      add item
    </button>

    {state.view(xs =>
      xs.map((text, i) =>
        <ElWithHover key={i} text={text.toString()} />
    ))}

    <h2>Simplified</h2>

    {state.view(xs =>
      xs.map((text, i) => {
        const ts = mkName()
        return <El key={i} text={text.toString()} ts={ts} />
      }))}
  </F.div>
}

export const Main = ({
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  state = Atom.create(0)
}) => {
  return (
    <MinimalReproduce />
  )
}

export default {
  Component: Main,
  defaultState: 0
}