import React, { Component } from 'react';
import { Tabs } from '@redux-devtools/ui';
import Connection from './Connection';
import Themes from './Themes';
import StateTree from './StateTree';
// eslint-disable-next-line @typescript-eslint/ban-types
export default class Settings extends Component {
  tabs = [{
    name: 'Connection',
    component: Connection
  }, {
    name: 'Themes',
    component: Themes
  }, {
    name: 'State Tree',
    component: StateTree
  }];
  state = {
    selected: 'Connection'
  };
  handleSelect = selected => {
    this.setState({
      selected
    });
  };
  render() {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line @typescript-eslint/ban-types
      React.createElement(Tabs, {
        tabs: this.tabs,
        selected: this.state.selected,
        onClick: this.handleSelect
      })
    );
  }
}