/* eslint-disable import/first */
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 TestRunner from '../TestRunner/TestRunner';
import Markdown from '../Markdown/Markdown';
import LoadingIcon from '../LoadingIcon/LoadingIcon';
import Toggle from 'react-bootstrap-toggle';
import 'react-bootstrap-toggle/dist/bootstrap2-toggle.css';
import { renderIf } from '../../helpers';
import { defaultFunc } from '../CodeTester/helpers';

class InstructionsPanel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      autoRun: props.autoRun,
      commitMessage: ''
    };
    this.toggleAutoRun = this.toggleAutoRun.bind(this);
    this.handleCommitButton = this.handleCommitButton.bind(this);
    this.onCommitMessage = this.onCommitMessage.bind(this);
  }

  onCommitMessage(e) {
    const commitMessage = e.target.value;
    this.setState({ commitMessage });
  }

  toggleAutoRun() {
    this.setState(({ autoRun }) => ({ autoRun: !autoRun }));
  }

  handleCommitButton(e) {
    e.preventDefault();
    const { handleGithubSubmit } = this.props;
    const { commitMessage } = this.state;
    handleGithubSubmit(commitMessage);
    this.setState({ commitMessage: '' });
  }

  render() {
    const {
      instructions,
      markdownOptions,
      testSpec,
      lintedCode,
      handleConsoleLog,
      iFrameUrl,
      testHandlerUrl,
      onError,
      infiniteLoopTimeout,
      submitEnabled,
      onTestRunnerSubmitClick,
      editMode,
      handleReset,
      onTestRunnerRef,
      tabIndex,
      onTabSelect,
      handleUrlInput,
      onTestResults,
      committing
    } = this.props;
    const { autoRun, commitMessage } = this.state;
    return (
      <div className="left-control">
        <Tabs selectedIndex={tabIndex} onSelect={onTabSelect} className="instructions-panel">
          <TabList className="selection-panels">
            <Tab className="selection-panel">Instructions</Tab>
            <Tab className="selection-panel">Tests</Tab>
            {renderIf(editMode)(<Tab className="selection-panel">Edit</Tab>)}
          </TabList>
          <TabPanel id="code-tester-instructions" className="code-tester-instructions">
            {renderIf(editMode)(
              <div>
                <h4>Enter CodeQuiz Url</h4>
                <form className="flex form-group" onSubmit={handleUrlInput}>
                  <input className="form-control" name="code-quiz-url" size="50" />
                  <button className="btn btn-info pull-right">
                    Preview CodeQuiz
                  </button>
                </form>
              </div>
            )}
            <Markdown markdown={instructions} options={markdownOptions} />
          </TabPanel>
          <TabPanel id="code-tester-test-runner" className="code-tester-test-runner">
            <TestRunner
              testSpec={testSpec}
              codeToTest={lintedCode}
              onTestResults={onTestResults}
              onConsoleLog={handleConsoleLog}
              autoRun={autoRun}
              iFrameUrl={iFrameUrl}
              testHandlerUrl={testHandlerUrl}
              onError={onError}
              infiniteLoopTimeout={infiniteLoopTimeout}
              submitEnabled={submitEnabled}
              onSubmitClick={onTestRunnerSubmitClick}
              onTestRunnerRef={onTestRunnerRef}
              onRunClick
            />
          </TabPanel>
          {renderIf(editMode)(
            <TabPanel id="code-tester-edit-panel" className="code-tester-edit-panel">
              <h4>Enter Commit Message</h4>
              <form className="flex form-group" onSubmit={this.handleCommitButton}>
                <input className="form-control" name="code-quiz-url" size="50" value={commitMessage} onChange={this.onCommitMessage} />
                <button className="btn btn-success pull-right" >
                  {committing ?
                    <LoadingIcon /> :
                    <span>Commit <i className="fa fa-github fa-lg" aria-hidden="true" /></span>
                  }
                </button>
              </form>
            </TabPanel>
          )}
        </Tabs>
        <div className="settings-panel">
          <div className="settings-panel-group">
            <span style={{color: 'white', paddingRight: '15px'}}>Auto-Run</span>
            <Toggle
              onClick={this.toggleAutoRun}
              className="left-panel-switch"
              on="ON"
              off="OFF"
              offstyle="danger"
              active={this.state.autoRun}
            />
          </div>
          <button className="btn btn-sm btn-warning" onClick={handleReset}>Reset</button>
        </div>
      </div>
    );
  }
}

InstructionsPanel.propTypes = {
  instructions: PropTypes.string,
  markdownOptions: PropTypes.objectOf(PropTypes.bool),
  autoRun: PropTypes.bool.isRequired,
  testSpec: PropTypes.string.isRequired,
  lintedCode: PropTypes.string,
  onTestResults: PropTypes.func,
  iFrameUrl: PropTypes.string.isRequired,
  testHandlerUrl: PropTypes.string.isRequired,
  onError: PropTypes.func,
  infiniteLoopTimeout: PropTypes.number,
  submitEnabled: PropTypes.bool,
  onTestRunnerSubmitClick: PropTypes.func,
  handleConsoleLog: PropTypes.func,
  editMode: PropTypes.bool,
  handleReset: PropTypes.func,
  onTestRunnerRef: PropTypes.func,
  handleUrlInput: PropTypes.func,
  handleGithubSubmit: PropTypes.func,
  onTabSelect: PropTypes.func.isRequired,
  tabIndex: PropTypes.number.isRequired,
  committing: PropTypes.bool
};

InstructionsPanel.defaultProps = {
  instructions: '',
  lintedCode: '',
  onTestResults: defaultFunc,
  onError: defaultFunc,
  infiniteLoopTimeout: 3000,
  submitEnabled: true,
  onTestRunnerSubmitClick: defaultFunc,
  handleConsoleLog: defaultFunc,
  editMode: false,
  handleReset: defaultFunc,
  onTestRunnerRef: defaultFunc,
  handleUrlInput: defaultFunc,
  handleGithubSubmit: defaultFunc,
  committing: false,
  markdownOptions: {}
};

export default InstructionsPanel;
