import * as React from 'react';
import {createRoot} from 'react-dom/client';

import '../src/assets/style.css';
import TodoChoppers from  '../src/assets/todo-choppers.gif';
import { findExistingAxe } from '.';

const App: React.FC = () => {
  const addAxe = async () => {
    var axe = await findExistingAxe()
    if (!axe) {
      axe = await miro.board.createImage({
        url: 'https://www.svgrepo.com/show/395800/axe.svg',
        width: 200,
        title: 'todo-tree-axe'
      });
    }
    
    await miro.board.viewport.zoomTo(axe);
  };

  return (
    <div>
      <img src={TodoChoppers}/>
        <button className="button button-primary" onClick={addAxe}>
          Create Axe
        </button>
    </div>
  );
};

const container = document.getElementById('root');
if (container) {
  const root = createRoot(container);
  root.render(<App />);
}