import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Tabs } from '@redux-devtools/ui';
import { StateTab, ActionTab, DiffTab } from '@redux-devtools/inspector-monitor';
import { selectMonitorTab } from '../../../actions';
import RawTab from './RawTab';
import ChartTab from './ChartTab';
import VisualDiffTab from './VisualDiffTab';
class SubTabs extends Component {
  constructor(props) {
    super(props);
    this.updateTabs(props);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.parentTab !== this.props.parentTab) {
      this.updateTabs(nextProps);
    }
  }
  selector = () => {
    switch (this.props.parentTab) {
      case 'Action':
        return {
          data: this.props.action
        };
      case 'Diff':
        return {
          data: this.props.delta
        };
      default:
        return {
          data: this.props.nextState
        };
    }
  };
  updateTabs(props) {
    const parentTab = props.parentTab;
    if (parentTab === 'Diff') {
      this.tabs = [{
        name: 'Tree',
        component: DiffTab,
        selector: () => this.props
      }, {
        name: 'Raw',
        component: VisualDiffTab,
        selector: this.selector
      }];
      return;
    }
    this.tabs = [{
      name: 'Tree',
      component: parentTab === 'Action' ? ActionTab : StateTab,
      selector: () => this.props
    }, {
      name: 'Chart',
      component: ChartTab,
      selector: this.selector
    }, {
      name: 'Raw',
      component: RawTab,
      selector: this.selector
    }];
  }
  render() {
    let selected = this.props.selected;
    if (selected === 'Chart' && this.props.parentTab === 'Diff') selected = 'Tree';
    return /*#__PURE__*/React.createElement(Tabs, {
      tabs: this.tabs,
      selected: selected || 'Tree',
      onClick: this.props.selectMonitorTab
    });
  }
}
const mapStateToProps = state => ({
  parentTab: state.monitor.monitorState.tabName,
  selected: state.monitor.monitorState.subTabName
});
const actionCreators = {
  selectMonitorTab
};
export default connect(mapStateToProps, actionCreators)(SubTabs);