import {useCallback, useState} from 'react';
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

import {useEcsTick} from '@/react/context/ecs.js';
import {useMainEntity} from '@/react/context/main-entity.js';

import styles from './devtools.module.css';

import Tiles from './devtools/tiles.jsx';

export default function Devtools({
  eventsChannel,
}) {
  const [mainEntity] = useMainEntity();
  const [mainEntityJson, setMainEntityJson] = useState('');
  const onEcsTick = useCallback((payload, ecs) => {
    if (!mainEntity) {
      return;
    }
    setMainEntityJson(JSON.stringify(ecs.get(mainEntity), null, 2));
  }, [mainEntity]);
  useEcsTick(onEcsTick);
  return (
    <div className={styles.devtools}>
      <Tabs>
        <TabList>
          <Tab>Dashboard</Tab>
          <Tab>Tiles</Tab>
        </TabList>
        <TabPanel>
          <div className={styles.dashboard}>
            <form>
              <div className={styles.engineBar}>
              </div>
            </form>
            <pre><code><small>{mainEntityJson}</small></code></pre>
          </div>
        </TabPanel>
        <TabPanel>
          <Tiles
            eventsChannel={eventsChannel}
          />
        </TabPanel>
      </Tabs>
    </div>
  );
}