import React 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';
import { defaultFunc } from '../CodeTester/helpers';

const EditModeTabs = ({
  initialCode,
  showLints,
  instructions,
  testSpec,
  handleInstructionsChange,
  handleTestSpecChange,
  handleBoilerplateChange,
  handleLintedBoilerplateCode,
  handleReset
}) => (
  <Tabs>
    <TabList className="editor-selection-panels">
      <Tab className="selection-panel">Boilerplate</Tab>
      <Tab className="selection-panel">Instructions</Tab>
      <Tab className="selection-panel">Tests</Tab>
    </TabList>
    <TabPanel>
      <Editor
        code={initialCode}
        showLints={showLints}
        onAnyCode={handleBoilerplateChange}
        onValidCode={handleLintedBoilerplateCode}
        handleReset={handleReset}
      />
    </TabPanel>
    <TabPanel>
      <InstructionsEditor code={instructions} onAnyCode={handleInstructionsChange} />
    </TabPanel>
    <TabPanel>
      <TestSpecEditor code={testSpec} onAnyCode={handleTestSpecChange} />
    </TabPanel>
  </Tabs>
);

EditModeTabs.propTypes = {
  initialCode: PropTypes.string.isRequired,
  showLints: PropTypes.bool,
  instructions: PropTypes.string.isRequired,
  testSpec: PropTypes.string.isRequired,
  handleInstructionsChange: PropTypes.func.isRequired,
  handleTestSpecChange: PropTypes.func.isRequired,
  handleBoilerplateChange: PropTypes.func.isRequired,
  handleLintedBoilerplateCode: PropTypes.func.isRequired,
  handleReset: PropTypes.func,
};

EditModeTabs.defaultProps = {
  showLints: false,
  handleReset: defaultFunc
};

export default EditModeTabs;
