import React, {
    useRef,
    useCallback,
    useEffect,
    Fragment,
    useState
  } from 'https://cdn.skypack.dev/react@17.0.1';
  import { render } from 'https://cdn.skypack.dev/react-dom@17.0.1';
  const animejs = anime;

  function Anime(props: AnimeProps) {
    // Current anime instance
    const animes = useRef<AnimeInstance[]>([]);
    // Currently fed Anime targets
    const targets = useRef<any[]>([]);
    //Current refs
    const targetRefs = useRef<any[]>([]);
    // Completed Anime targets
    const completed = useRef<AnimeSet>(new Set<any>());

    const cycleAnime = props => {
      // 🗾 Reset Anime.js
      for (let ani of animes.current) {
        if (ani.completed) animes.current = animes.current.filter(a => a != ani);
      }
      if (targets.current.length > 0) animejs.remove(targets);
      targets.current = [];

      // ➕ Add new target references that haven't completed
      for (let ref of targetRefs.current) {
        if (ref.current && !completed.current.has(ref.current))
          targets.current.push(ref.current);
      }

      // 😮 Overload complete callback
      const complete = (ani: AnimeInstance) => {
        if (props.complete) props.complete(ani);
        ani.animatables.map((a: any) => completed.current.add(a.target));
      };
      const animeProps: any = {
        ...props,
        targets: targets.current,
        complete
      };
      delete animeProps.children;
      delete animeProps.svg;
      animes.current.push(animejs(animeProps));
    };

    const createAnime = useCallback(() => {
      cycleAnime(props);
    }, [props]);

    useEffect(() => {
      createAnime();
    }, [createAnime]);

    const refs = targetRefs.current;
    /* istanbul ignore next */
    let children: ReactNodeArray = Array.isArray(props.children)
      ? props.children
      : [props.children];
    return (
      <Fragment>
        {children.flat().map((child: any, i: number) => {
          refs.push(React.createRef());
          /* istanbul ignore next */
          const El = props.component ? props.component : 'div';
          return (
            <El ref={refs[refs.length - 1]} key={i}>
              {child}
            </El>
          );
        })}
      </Fragment>
    );
  }

  function App(props) {
    let [state, setState] = useState({ myList: ['First Entry'] });
    return (
      <div>
        <a
          style={{
            textAlign: 'center',
            display: 'block',
            cursor: 'pointer',
            userSelect: 'none'
          }}
          onClick={() =>
            setState({
              myList: [...state.myList, 'New Entry ' + state.myList.length]
            })
          }>
          Add Entry
        </a>

        <Anime opacity={[0, 1]} translateY={'1em'} delay={(e, i) => i * 300}>
          <h1>Entries</h1>
          {state.myList.map((e, i) => (
            <p key={i}>
              <a
                onClick={_ =>
                  setState({ myList: state.myList.filter((__, j) => i !== j) })
                }
                style={{ textDecoration: 'none' }}>
                ❌
              </a>{' '}
              {e}
            </p>
          ))}
        </Anime>
      </div>
    );
  }
  const node = document.getElementById('app');

  render(<App />, node);