<commit_before>/* global Treant $ */

import React, { Component } from 'react'
import {Link} from 'react-router-dom'

// material ui
import {Card, CardActions, CardTitle, CardText} from 'material-ui/Card'
import FlatButton from 'material-ui/FlatButton'
import Dialog from 'material-ui/Dialog'
import Divider from 'material-ui/Divider'
import Toggle from 'material-ui/Toggle'

// html parser
import ReactHtmlParser from 'react-html-parser'

// utils
import {getDialogBox, getCancelAlertButton} from '../utils/storyBranchNavUtils'
import history from '../history'
import _ from 'lodash'

// tree graph
import Tree from 'react-tree-graph'

export default class SingleCard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isReadingBranchOptions: false,
      branchExpanded: false
    }
  }

  handleDownClick = () => this.setState({isReadingBranchOptions: true})

  getBranchOptions = () => {
    const branchLinks = []
    const {currentCard, currentStoryBranchId, currentCardId} = this.props.currentState
    const {parentBranchId, parentCardId} = this.props.parent

    if (currentCard && currentCard.branches) {
      Object.keys(currentCard.branches).forEach(branch => {
        if (branch !== currentStoryBranchId && branch !== parentBranchId) {
          branchLinks.push(
            <Link
              key={branch}
              to={`/read/${branch}/${currentCard.branches[branch]}`}
              onClick={() => {
                this.setState({isReadingBranchOptions: false, isChangingBranch: true})
                this.props.handleOptionClick()
              }}>
              {branch}
            </Link>
          )
        }
      })
    }
    return branchLinks
  }

  getButton = (valCheck, label, bkColor, callback) => {
    if (valCheck) return <FlatButton label={label} backgroundColor={bkColor} onClick={callback} />
  }

  getBranchingButton = (rootId, cardId, currentCard) => {
    return (
      <Link to={`/write/${rootId}/${cardId}/new_branch`}>
        <FlatButton label='Create A Branch' backgroundColor='#D1B38E' disabled={!currentCard.published} />
      </Link>
    )
  }

  handleBranchExpandChange = () => {
    this.setState({branchExpanded: !this.state.expanded})
  }

  handleToggle = (event, toggle) => {
    this.setState({branchExpanded: !this.state.branchExpanded})
  };

  render() {
    const {currentCard, currentStoryBranchId, currentCardId} = this.props.currentState
    const {parentBranchId, parentCardId} = this.props.parent
    const {isReadingBranchOptions} = this.state
    const branches = this.getBranchOptions()

    const graphBranchOptions = () => {
      const branching = (branchId) => {
        this.props.handleOptionClick()
        history.push(`/read/${branchId}/${currentCard.branches[branchId]}`)
      }
      const topBranches = Object.keys(currentCard.branches).filter(branchId => branchId !== currentStoryBranchId).slice(0, 3)
      if (topBranches.length < 3) {
        return topBranches.map(branchId => ({
          name: branchId,
          onClick: () => branching(branchId)
        }))
      } else {
        return topBranches.map((branchId, ind) => {
          return ind === 2
          ? {name: 'MORE BRANCHES', onClick: () => this.setState({isReadingBranchOptions: true})}
          : {name: branchId, onClick: () => branching(branchId)}
        })
      }
    }

    let data = {}
    if (branches.length) {
      data = {
        name: `${currentStoryBranchId}`,
        children: graphBranchOptions(branches)
      }
    }

    console.log('what is the current card?', currentCard)

    return (
      <Card expanded={this.state.expanded} onExpandChange={this.handleToggle}>
        <CardTitle title="" subtitle={`Scene originally from "${currentCard.branchTitle}"`} subtitleStyle={{padding: '3px 10px 3px 0px', color: 'white', backgroundColor: '#d4d4d4', textAlign: 'right'}} />
        <CardText>
          {
            currentCard
            ? currentCard.published
              ? ReactHtmlParser(currentCard.text)
              : <div><h3>This card hasn't been published yet!</h3>Stay tuned for more from <Link to={`/allUsers/${currentCard.userId}`}>this user.</Link></div>
            : <div></div>
          }<commit_msg>remove console log<commit_after>/* global Treant $ */

import React, { Component } from 'react'
import {Link} from 'react-router-dom'

// material ui
import {Card, CardActions, CardTitle, CardText} from 'material-ui/Card'
import FlatButton from 'material-ui/FlatButton'
import Dialog from 'material-ui/Dialog'
import Divider from 'material-ui/Divider'
import Toggle from 'material-ui/Toggle'

// html parser
import ReactHtmlParser from 'react-html-parser'

// utils
import {getDialogBox, getCancelAlertButton} from '../utils/storyBranchNavUtils'
import history from '../history'
import _ from 'lodash'

// tree graph
import Tree from 'react-tree-graph'

export default class SingleCard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isReadingBranchOptions: false,
      branchExpanded: false
    }
  }

  handleDownClick = () => this.setState({isReadingBranchOptions: true})

  getBranchOptions = () => {
    const branchLinks = []
    const {currentCard, currentStoryBranchId, currentCardId} = this.props.currentState
    const {parentBranchId, parentCardId} = this.props.parent

    if (currentCard && currentCard.branches) {
      Object.keys(currentCard.branches).forEach(branch => {
        if (branch !== currentStoryBranchId && branch !== parentBranchId) {
          branchLinks.push(
            <Link
              key={branch}
              to={`/read/${branch}/${currentCard.branches[branch]}`}
              onClick={() => {
                this.setState({isReadingBranchOptions: false, isChangingBranch: true})
                this.props.handleOptionClick()
              }}>
              {branch}
            </Link>
          )
        }
      })
    }
    return branchLinks
  }

  getButton = (valCheck, label, bkColor, callback) => {
    if (valCheck) return <FlatButton label={label} backgroundColor={bkColor} onClick={callback} />
  }

  getBranchingButton = (rootId, cardId, currentCard) => {
    return (
      <Link to={`/write/${rootId}/${cardId}/new_branch`}>
        <FlatButton label='Create A Branch' backgroundColor='#D1B38E' disabled={!currentCard.published} />
      </Link>
    )
  }

  handleBranchExpandChange = () => {
    this.setState({branchExpanded: !this.state.expanded})
  }

  handleToggle = (event, toggle) => {
    this.setState({branchExpanded: !this.state.branchExpanded})
  };

  render() {
    const {currentCard, currentStoryBranchId, currentCardId} = this.props.currentState
    const {parentBranchId, parentCardId} = this.props.parent
    const {isReadingBranchOptions} = this.state
    const branches = this.getBranchOptions()

    const graphBranchOptions = () => {
      const branching = (branchId) => {
        this.props.handleOptionClick()
        history.push(`/read/${branchId}/${currentCard.branches[branchId]}`)
      }
      const topBranches = Object.keys(currentCard.branches).filter(branchId => branchId !== currentStoryBranchId).slice(0, 3)
      if (topBranches.length < 3) {
        return topBranches.map(branchId => ({
          name: branchId,
          onClick: () => branching(branchId)
        }))
      } else {
        return topBranches.map((branchId, ind) => {
          return ind === 2
          ? {name: 'MORE BRANCHES', onClick: () => this.setState({isReadingBranchOptions: true})}
          : {name: branchId, onClick: () => branching(branchId)}
        })
      }
    }

    let data = {}
    if (branches.length) {
      data = {
        name: `${currentStoryBranchId}`,
        children: graphBranchOptions(branches)
      }
    }

    return (
      <Card expanded={this.state.expanded} onExpandChange={this.handleToggle}>
        <CardTitle title="" subtitle={`Scene originally from "${currentCard.branchTitle}"`} subtitleStyle={{padding: '3px 10px 3px 0px', color: 'white', backgroundColor: '#d4d4d4', textAlign: 'right'}} />
        <CardText>
          {
            currentCard
            ? currentCard.published
              ? ReactHtmlParser(currentCard.text)
              : <div><h3>This card hasn't been published yet!</h3>Stay tuned for more from <Link to={`/allUsers/${currentCard.userId}`}>this user.</Link></div>
            : <div></div>
          }
{'fraction_non_alphanumeric': 0.13613744075829384, 'fraction_numerical': 0.004028436018957346, 'mean_word_length': 2.8737953189536483, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 69, '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': '2858835', 'n_tokens_mistral': 2504, 'n_tokens_neox': 2487, 'n_words': 508}