import React from "react";
import { storiesOf, action, linkTo } from "@kadira/storybook";
import Welcome from "./Welcome";
import { String, Boolean, Text } from "../components/RespondToForm/widgets";
import RespondToForm from "../components/RespondToForm";
import {
  FormType,
  SectionType,
  QuestionType,
  QuestionSubmissionType
} from "../types";
import { List, Map } from "immutable";

storiesOf("Welcome", module).add("to Storybook", () => (
  <Welcome showApp={linkTo("Button")} />
));

storiesOf("String", module).add("with value", () => (
  <String onChange={action("onChange")} value="Hello" />
));

storiesOf("Boolean", module).add("with value", () => (
  <Boolean onChange={action("onChange")} value="Hello" />
));

storiesOf("Text", module).add("with value", () => (
  <Text onChange={action("onChange")} value="Hello" />
));

const section2 = new SectionType({
  name: "Second",
  content: "Content for my section",
  order: 2,
  questions: List([
    new QuestionType({
      id: 1,
      key: "first",
      label: "first",
      type: "string"
    }),
    new QuestionType({
      id: 2,
      key: "second",
      label: "second label",
      type: "string"
    })
  ])
});

const section1 = new SectionType({
  name: "First",
  content: "Content for my Section",
  order: 1,
  questions: List([
    new QuestionType({
      id: 3,
      key: "third",
      label: "third label",
      type: "string"
    }),
    new QuestionType({
      id: 4,
      key: "fourth key",
      label: "fourth label",
      type: "string"
    })
  ])
});

const submissions = new Map({ 1: new QuestionSubmissionType({ key: 1 }) });
const form = new FormType({
  sections: List([section2, section1]),
  submissions: submissions
});

storiesOf("RespondToForm", module).add("with value", () => (
  <RespondToForm
    form={form}
    submissions={submissions}
    submitForm={() => {}}
    getForm={() => form}
    currentStep={0}
    displaySectionsAs="STEPS"
  />
));

@@ -189,24 +189,144 @@
 m/widgets%22;%0A
+import Question from %22../components/RespondToForm/Question%22;%0Aimport Section from %22../components/RespondToForm/Section%22;%0A
 import Respo
@@ -1850,58 +1850,493 @@
 );%0A%0A
-storiesOf(%22RespondToForm%22, module).add(%22with value
+const question = new QuestionType(%7B%0A  key: %22first%22,%0A  label: %22first%22,%0A  type: %22string%22%0A%7D);%0A%0AstoriesOf(%22Question%22, module).add(%22a String%22, () =%3E (%0A  %3CQuestion%0A    question=%7Bquestion%7D%0A    submission=%7Bnew QuestionSubmissionType()%7D%0A    setSubmission=%7B() =%3E %7B%7D%7D%0A  /%3E%0A));%0A%0AstoriesOf(%22Section%22, module).add(%22with name and content%22, () =%3E (%0A  %3CSection%0A    section=%7Bsection1%7D%0A    submissions=%7Bnew Map()%7D%0A    setSubmission=%7B() =%3E %7B%7D%7D%0A  /%3E%0A));%0A%0AstoriesOf(%22RespondToForm%22, module)%0A  .add(%22as steps
 %22, (
@@ -2342,16 +2342,18 @@
 () =%3E (%0A
+  
   %3CRespo
@@ -2365,16 +2365,18 @@
 orm%0A    
+  
 form=%7Bfo
@@ -2379,24 +2379,26 @@
 =%7Bform%7D%0A    
+ 
+ 
 submissions=
@@ -2411,16 +2411,18 @@
 ssions%7D%0A
+  
     subm
@@ -2443,16 +2443,18 @@
 %7B%7D%7D%0A    
+  
 getForm=
@@ -2470,16 +2470,18 @@
 rm%7D%0A    
+ 
+ 
 currentS
@@ -2488,16 +2488,18 @@
 tep=%7B0%7D%0A
+  
     disp
@@ -2520,17 +2520,244 @@
 %22STEPS%22%0A
+  
   /%3E%0A
+  ))%0A  .add(%22as headings%22, () =%3E (%0A    %3CRespondToForm%0A      form=%7Bform%7D%0A      submissions=%7Bsubmissions%7D%0A      submitForm=%7B() =%3E %7B%7D%7D%0A      getForm=%7B() =%3E form%7D%0A      currentStep=%7B0%7D%0A      displaySectionsAs=%22HEADINGS%22%0A    /%3E%0A  
 ));%0A

Add Question, Section stories