import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { Form } from '../../../components/formHelpers';
import {
  backEndProject,
  frontEndProject,
  pythonProject
} from '../../../../utils/challengeTypes';

const propTypes = {
  challengeType: PropTypes.number,
  description: PropTypes.string,
  isSubmitting: PropTypes.bool,
  onSubmit: PropTypes.func.isRequired,
  updateSolutionForm: PropTypes.func.isRequired
};

const frontEndProjectFields = ['solution'];
const backEndProjectFields = ['solution', 'githubLink'];

const options = {
  types: {
    solution: 'url',
    githubLink: 'url'
  },
  required: ['solution']
};

export class SolutionForm extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  componentDidMount() {
    this.props.updateSolutionForm({});
  }
  handleSubmit(values) {
    this.props.updateSolutionForm(values);
    this.props.onSubmit();
  }
  render() {
    const { isSubmitting, challengeType, description } = this.props;
    const buttonCopy = isSubmitting
      ? 'Submit and go to my next challenge'
      : "I've completed this challenge";

    let solutionFormFields = frontEndProjectFields;
    let solutionLink = 'Link, ex: ';
    let solutionFormID = 'front-end-form';

    switch (challengeType) {
      case frontEndProject:
        solutionFormFields = frontEndProjectFields;
        solutionLink =
          solutionLink + 'https://codepen.io/camperbot/full/oNvPqqo';
        break;

      case backEndProject:
        solutionFormFields = backEndProjectFields;
        solutionLink = solutionLink + 'https://project-name.camperbot.repl.co/';
        solutionFormID = 'back-end-form';
        break;

      case pythonProject:
        solutionFormFields = frontEndProjectFields;
        solutionLink =
          solutionLink +
          (description.includes('Colaboratory')
            ? 'https://colab.research.google.com/drive/1i5EmInTWi1RFvFr2_aRXky96YxY6sbWy'
            : 'https://repl.it/@camperbot/hello');
        break;

      default:
        solutionFormFields = frontEndProjectFields;
        solutionLink =
          solutionLink + 'https://codepen.io/camperbot/full/oNvPqqo';
    }

    return (
      <Form
        buttonText={`${buttonCopy}`}
        formFields={solutionFormFields}
        id={solutionFormID}
        options={{
          ...options,
          placeholders: {
            solution: solutionLink,
            githubLink: 'ex: https://github.com/camperbot/hello'
          }
        }}
        submit={this.handleSubmit}
      />
    );
  }
}

SolutionForm.propTypes = propTypes;

export default SolutionForm;

@@ -137,16 +137,27 @@
 mport %7B%0A
+  backend,%0A
   backEn
@@ -460,35 +460,97 @@
 %7D;%0A%0A
-const frontEndProjectFields
+// back end challenges and front end projects use a single form field%0Aconst solutionField
  = %5B
@@ -558,16 +558,20 @@
 solution
+Link
 '%5D;%0Acons
@@ -605,16 +605,20 @@
 solution
+Link
 ', 'gith
@@ -669,16 +669,20 @@
 solution
+Link
 : 'url',
@@ -731,16 +731,20 @@
 solution
+Link
 '%5D%0A%7D;%0A%0Ae
@@ -1266,25 +1266,17 @@
     let 
-solutionF
+f
 ormField
@@ -1279,37 +1279,29 @@
 ields = 
-frontEndProject
+solution
 Field
-s
 ;%0A    le
@@ -1322,14 +1322,8 @@
  = '
-Link, 
 ex: 
@@ -1430,33 +1430,25 @@
 ct:%0A        
-solutionF
+f
 ormFields = 
@@ -1447,37 +1447,29 @@
 ields = 
-frontEndProject
+solution
 Field
-s
 ;%0A      
@@ -1590,37 +1590,182 @@
 back
-EndProject:%0A        solutionF
+end:%0A        formFields = solutionField;%0A        solutionLink = solutionLink + 'https://project-name.camperbot.repl.co/';%0A        break;%0A%0A      case backEndProject:%0A        f
 ormF
@@ -1963,33 +1963,25 @@
 ct:%0A        
-solutionF
+f
 ormFields = 
@@ -1980,37 +1980,29 @@
 ields = 
-frontEndProject
+solution
 Field
-s
 ;%0A      
@@ -2271,25 +2271,17 @@
         
-solutionF
+f
 ormField
@@ -2288,29 +2288,21 @@
 s = 
-frontEndProject
+solution
 Field
-s
 ;%0A  
@@ -2481,25 +2481,17 @@
 Fields=%7B
-solutionF
+f
 ormField
@@ -2608,16 +2608,20 @@
 solution
+Link
 : soluti

add backend placeholder to solution form (#39494)