<commit_before>/**
 * @providesModule AllQuizzes
 * @flow
 */

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { FormattedMessage } from 'react-intl'
import { Button, Intent, NonIdealState } from '@blueprintjs/core'
import { Link } from 'react-router-dom'

import { Title } from 'suggested_quizzes/styled'

import { fetchSuggestedQuizzes } from 'redux/actions'

import type { DraftQuestion, State, SuggestedQuiz } from 'redux/state'

function mapStateToProps ({ suggestedQuizzes }: State) {
  return {
    quizzes: Object.values(suggestedQuizzes),
  }
}

type Props = {
  fetchSuggestedQuizzes: typeof fetchSuggestedQuizzes,
  quizzes: SuggestedQuiz[],
  onCreateQuiz: () => any,
}

function AllQuizzes ({ fetchSuggestedQuizzes, onCreateQuiz, quizzes }: Props) {
  useEffect(() => fetchSuggestedQuizzes(), [])

  return (
    <div className="pt-dialog-body">
      {quizzes.length > 0 ? (
        <>
          <List>
            {quizzes.map(quiz => {
              const {
                multipleChoiceCount,
                openEndedCount,
              } = countQuestionTypes(quiz.questions)
              return (
                <li key={quiz.param}>
                  <Link to={`/suggested_quizzes/${quiz.param}`}>
                    {quiz.title}
                    <Tag>
                      <FormattedMessage
                        id="quizzes.quiz.multipleChoiceQuestions.js"
                        values={{ count: multipleChoiceCount }}
                      />
                    </Tag>
                    <Tag>
                      <FormattedMessage
                        id="quizzes.quiz.openEndedQuestions.js"
                        values={{ count: openEndedCount }}
                      />
                    </Tag>
                  </Link>
                </li>
              )
            })}
          </List>
          <NewQuizButton onClick={onCreateQuiz} />
        </>
      ) : (
        <NonIdealState
          visual="properties"
          title={
            <FormattedMessage id="cases.edit.suggestedQuizzes.suggestAnAssessment" />
          }
          description={
            <FormattedMessage id="cases.edit.suggestedQuizzes.description" />
          }
          action={<NewQuizButton onClick={onCreateQuiz} />}
        />
      )}
    </div>
  )
}

export default connect(
  mapStateToProps,
  { fetchSuggestedQuizzes }
)(AllQuizzes)

function countQuestionTypes (questions: DraftQuestion[]) {
  let multipleChoiceCount = 0
  let openEndedCount = 0

  questions.forEach(question => {
    question.options.length > 0 ? multipleChoiceCount++ : openEndedCount++
  })

  return { multipleChoiceCount, openEndedCount }
}

const List = styled.ul`
  list-style: none;
`
const Tag = styled.span.attrs({ className: 'pt-tag pt-minimal pt-large' })`
  margin-left: 0.3em;
`

function NewQuizButton ({ onClick }) {
  return (<commit_msg>fix: style the AllQuizzes list<commit_after>/**
 * @providesModule AllQuizzes
 * @flow
 */

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { FormattedMessage } from 'react-intl'
import { Button, Intent, NonIdealState } from '@blueprintjs/core'
import { Link } from 'react-router-dom'

import { Title } from 'suggested_quizzes/styled'

import { fetchSuggestedQuizzes } from 'redux/actions'

import type { DraftQuestion, State, SuggestedQuiz } from 'redux/state'

function mapStateToProps ({ suggestedQuizzes }: State) {
  return {
    quizzes: Object.values(suggestedQuizzes),
  }
}

type Props = {
  fetchSuggestedQuizzes: typeof fetchSuggestedQuizzes,
  quizzes: SuggestedQuiz[],
  onCreateQuiz: () => any,
}

function AllQuizzes ({ fetchSuggestedQuizzes, onCreateQuiz, quizzes }: Props) {
  useEffect(() => fetchSuggestedQuizzes(), [])

  return (
    <div className="pt-dialog-body">
      {quizzes.length > 0 ? (
        <>
          <List>
            {quizzes.map(quiz => {
              const {
                multipleChoiceCount,
                openEndedCount,
              } = countQuestionTypes(quiz.questions)
              return (
                <li key={quiz.param}>
                  <QuizLink to={`/suggested_quizzes/${quiz.param}`}>
                    <QuizTitle>{quiz.title}</QuizTitle>
                    <Tag>
                      <FormattedMessage
                        id="quizzes.quiz.multipleChoiceQuestions.js"
                        values={{ count: multipleChoiceCount }}
                      />
                    </Tag>
                    <Tag>
                      <FormattedMessage
                        id="quizzes.quiz.openEndedQuestions.js"
                        values={{ count: openEndedCount }}
                      />
                    </Tag>
                  </QuizLink>
                </li>
              )
            })}
          </List>
          <NewQuizButton onClick={onCreateQuiz} />
        </>
      ) : (
        <NonIdealState
          visual="properties"
          title={
            <FormattedMessage id="cases.edit.suggestedQuizzes.suggestAnAssessment" />
          }
          description={
            <FormattedMessage id="cases.edit.suggestedQuizzes.description" />
          }
          action={<NewQuizButton onClick={onCreateQuiz} />}
        />
      )}
    </div>
  )
}

export default connect(
  mapStateToProps,
  { fetchSuggestedQuizzes }
)(AllQuizzes)

function countQuestionTypes (questions: DraftQuestion[]) {
  let multipleChoiceCount = 0
  let openEndedCount = 0

  questions.forEach(question => {
    question.options.length > 0 ? multipleChoiceCount++ : openEndedCount++
  })

  return { multipleChoiceCount, openEndedCount }
}

const List = styled.ul`
  list-style: none;
  padding: 0;
`

const QuizLink = styled(Link)`
  align-items: baseline;
  display: flex;
  margin-bottom: 0.25em;
`

const QuizTitle = styled.span`
  flex: 1;
`

const Tag = styled.span.attrs({ className: 'pt-tag pt-minimal pt-large' })`
  margin-left: 0.3em;
`

function NewQuizButton ({ onClick }) {
  return (
{'fraction_non_alphanumeric': 0.1160699689390224, 'fraction_numerical': 0.002779140101356874, 'mean_word_length': 1.9829351535836177, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 59, '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': '3512911', 'n_tokens_mistral': 1888, 'n_tokens_neox': 1788, 'n_words': 338}