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

import {useEcs, 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({
  applyFilters,
  eventsChannel,
  setApplyFilters,
}) {
  const [ecs] = useEcs();
  const [mainEntity] = useMainEntity();
  const [mainEntityJson, setMainEntityJson] = useState('');
  useEcsTick(() => {
    if (!ecs || !mainEntity) {
      return;
    }
    setMainEntityJson(JSON.stringify(ecs.get(mainEntity), null, 2));
  }, [ecs, mainEntity]);
  return (
    <div className={styles.devtools}>
      <Tabs>
        <TabList>
          <Tab>Dashboard</Tab>
          <Tab>Tiles</Tab>
        </TabList>
        <TabPanel>
          <div className={styles.dashboard}>
            <form>
              <div className={styles.engineBar}>
                <label>
                  <span>Apply filters</span>
                  <input
                    checked={applyFilters}
                    onChange={() => {
                      setApplyFilters(!applyFilters);
                    }}
                    type="checkbox"
                  />
                </label>
              </div>
            </form>
            <pre><code><small>{mainEntityJson}</small></code></pre>
          </div>
        </TabPanel>
        <TabPanel>
          <Tiles
            eventsChannel={eventsChannel}
          />
        </TabPanel>
      </Tabs>
    </div>
  );
}