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

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

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

export default function Devtools({
  applyFilters,
  eventsChannel,
  setApplyFilters,
}) {
  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>
          </div>
        </TabPanel>

        <TabPanel>
          <Tiles
            eventsChannel={eventsChannel}
          />
        </TabPanel>
      </Tabs>
    </div>
  );
}