import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

import Editor from '../Editor/Editor';
import InstructionsEditor from '../InstructionsEditor/InstructionsEditor';
import TestSpecEditor from '../TestSpecEditor/TestSpecEditor';

const EditModeTabs = ({
  initialCode,
  showLints,
  instructions,
  testSpec,
  handleInstructionsChange,
  handleTestSpecChange,
  handleBoilerplateChange
}) => (
  <Tabs>
    <TabList>
      <Tab>Boilerplate</Tab>
      <Tab>Instructions</Tab>
      <Tab>Tests</Tab>
    </TabList>
    <TabPanel>
      <Editor
        code={initialCode}
        showLints={showLints}
        onAnyCode={handleBoilerplateChange}
      />
    </TabPanel>
    <TabPanel>
      <InstructionsEditor code={instructions} onAnyCode={handleInstructionsChange} />
    </TabPanel>
    <TabPanel>
      <TestSpecEditor code={testSpec} onAnyCode={handleTestSpecChange}/>
    </TabPanel>
  </Tabs>
);

export default EditModeTabs;
