<commit_before>/* eslint-disable react/prop-types, jsx-a11y/href-no-hash */

import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import styled from "styled-components";
import { find, each } from "lodash";

import RoutingCondition from "components/RoutingCondition";
import MultipleChoiceAnswerOptionsSelector from "./MultipleChoiceAnswerOptionsSelector";
import { Alert, AlertText, AlertTitle } from "./Alert";

import sections from "./mockstate";

const Background = styled.span`
  padding: 1em;
  display: block;
  max-width: 55em;
`;

const findPageById = id => {
  let page;

  each(sections, ({ pages }) => {
    let result = find(pages, { id });
    if (result) {
      page = result;
    }
  });

  return page;
};

class ControlledRoutingCondition extends React.Component {
  state = {
    selectedPage: sections[0].pages[0]
  };

  handlePageChange = e => {
    this.setState({ selectedPage: findPageById(e.value) });
  };

  handleOptionSelectionChange = ({ name, value }) => {
    const { selectedPage } = this.state;

    find(selectedPage.options, { id: name }).selected = value;

    this.setState({
      selectedPage: {
        ...selectedPage
      }
    });
  };

  handleSelectAll = e => {
    const { selectedPage } = this.state;

    this.setState({
      selectedPage: {
        ...selectedPage,
        options: selectedPage.options.map(opt => ({
          ...opt,
          selected: true
        }))
      }
    });
  };

  render() {
    return (
      <RoutingCondition
        selectedPage={this.state.selectedPage}
        onPageChange={this.handlePageChange}
        onRemoveClick={action("Close")}
        sections={sections}
        {...this.props}
      >
        {this.props.children({
          options: this.state.selectedPage.options,
          onOptionSelectionChange: this.handleOptionSelectionChange,
          onSelectAll: this.handleSelectAll
        })}
      </RoutingCondition>
    );
  }
}

storiesOf("RoutingCondition", module)
  .addDecorator(story => <Background>{story()}</Background>)
  .add("Default", () => (
    <ControlledRoutingCondition id="routing-condition">
      {({ options, onOptionSelectionChange, onSelectAll }) => (
        <MultipleChoiceAnswerOptionsSelector
          options={options}
          onOptionSelectionChange={onOptionSelectionChange}
          onSelectAll={onSelectAll}
        />
      )}
    </ControlledRoutingCondition>
  ))
  .add("No answers", () => (
    <ControlledRoutingCondition id="routing-condition" pathEnd>
      {() => (
        <Alert>
          <AlertTitle>
            No answers have been added to this question yet.
          </AlertTitle>
          <AlertText>
            First, <a href="#">add an answer</a> to continue.
          </AlertText>
        </Alert>
      )}
    </ControlledRoutingCondition>
  ))
  .add("Routing unsupported", () => (
    <ControlledRoutingCondition id="routing-condition" pathEnd>
      {() => (
        <Alert>
          <AlertTitle>
            Routing is not available for this type of answer
          </AlertTitle>
          <AlertText>
            You cannot route on &apos;date range&apos; answers
          </AlertText>
        </Alert>
      )}
    </ControlledRoutingCondition>
  ));<commit_msg>remove state from RoutingCondition story<commit_after>/* eslint-disable react/prop-types, jsx-a11y/href-no-hash */

import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import styled from "styled-components";
import { first } from "lodash";

import RoutingCondition from "components/RoutingCondition";
import MultipleChoiceAnswerOptionsSelector from "./MultipleChoiceAnswerOptionsSelector";
import { Alert, AlertText, AlertTitle } from "./Alert";

import sections from "./mockstate";

const Background = styled.span`
  padding: 1em;
  display: block;
  max-width: 55em;
`;

const selectedPage = first(first(sections).pages);

storiesOf("RoutingCondition", module)
  .addDecorator(story => <Background>{story()}</Background>)
  .add("Default", () => (
    <RoutingCondition
      id="routing-condition"
      selectedPage={selectedPage}
      onPageChange={action("Page selected")}
      onRemoveClick={action("Close")}
      sections={sections}
    >
      <MultipleChoiceAnswerOptionsSelector
        options={selectedPage.options}
        onOptionSelectionChange={action("Option selected")}
        onSelectAll={action("Select all")}
      />
    </RoutingCondition>
  ))
  .add("No answers", () => (
    <RoutingCondition
      id="routing-condition"
      selectedPage={selectedPage}
      onPageChange={action("Page selected")}
      onRemoveClick={action("Close")}
      sections={sections}
      pathEnd
    >
      <Alert>
        <AlertTitle>
          No answers have been added to this question yet.
        </AlertTitle>
        <AlertText>
          First, <a href="#">add an answer</a> to continue.
        </AlertText>
      </Alert>
    </RoutingCondition>
  ))
  .add("Routing unsupported", () => (
    <RoutingCondition
      id="routing-condition"
      selectedPage={selectedPage}
      onPageChange={action("Page selected")}
      onRemoveClick={action("Close")}
      sections={sections}
      pathEnd
    >
      <Alert>
        <AlertTitle>
          Routing is not available for this type of answer
        </AlertTitle>
        <AlertText>
          You cannot route on &apos;date range&apos; answers
        </AlertText>
      </Alert>
    </RoutingCondition>
  ));
{'fraction_non_alphanumeric': 0.13199426111908177, 'fraction_numerical': 0.002152080344332855, 'mean_word_length': 2.7530282637954238, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 68, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '399348', 'n_tokens_mistral': 1579, 'n_tokens_neox': 1570, 'n_words': 340}