content: import React from 'react';
  import PropTypes from 'prop-types';
  import Question from './Question';
  import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
  
  
  const SurveyForm = ({
    questions,
    onSaveQuestion,
    onSortQuestions,
    onRemoveQuestion,
    hasMandatoryLabel,
    hasQuestionNumbers,
    addFlashMessage
  }) => {
  
    const onSortEnd = ({ oldIndex, newIndex }) => {
      onSortQuestions(oldIndex, newIndex);
    };
  
    const DragHandle = SortableHandle(() =>
      <span style={{ 'cursor': 'move' }}>
        <i className="fa fa-arrows-alt" aria-hidden="true"></i>
      </span>
    );
    const SortableItem = SortableElement(({
      question,
      onSaveQuestion,
      onRemoveQuestion,
      hasMandatoryLabel,
      hasQuestionNumbers,
      addFlashMessage,
      }) => {
      return (
        <div>
          <DragHandle />
          <Question
            question={question}
            onSaveQuestion={onSaveQuestion}
            onRemoveQuestion={onRemoveQuestion}
            hasMandatoryLabel={hasMandatoryLabel}
            hasQuestionNumbers={hasQuestionNumbers}
            addFlashMessage={addFlashMessage}
          />
        </div>
      );
    });
    const SortableList = SortableContainer(({ items }) => {
      return (
        <div>
          {items.map((item, index) => (
            <SortableItem
              key={item.id}
              index={index}
              question={item}
              onSaveQuestion={onSaveQuestion}
              onRemoveQuestion={onRemoveQuestion}
              hasMandatoryLabel={hasMandatoryLabel}
              hasQuestionNumbers={hasQuestionNumbers}
              addFlashMessage={addFlashMessage}
            />
          ))}
        </div>
      );
    });
    return (
      <SortableList
        items={questions}
        onSortEnd={onSortEnd}
        useDragHandle={true}
      />
    );
  };
  
  SurveyForm.propTypes = {
    questions: PropTypes.array,
    addFlashMessage: PropTypes.func.isRequired,
    hasMandatoryLabel: PropTypes.bool.isRequired,
    onRemoveQuestion: PropTypes.func.isRequired,
    onSaveQuestion: PropTypes.func.isRequired,
    onSortQuestions: PropTypes.func.isRequired,
    hasQuestionNumbers: PropTypes.bool.isRequired
  };
  
  export default SurveyForm;
  