<commit_before>import React, { PureComponent } from 'react'
import config from '../config'

import '../../css/authoring.less'

function camelCaseToWords (name) {
  return name.replace(/([A-Z])/g, ` $1`).toLowerCase()
}

const HIDDEN_OPTIONS = [ 'authoring' ]
const SEPARATOR_AFTER = [ 'logging', 'endTime' ]

const OPTIONS_WITH_SEPARATORS = (function () {
  const result = []
  Object.keys(config).forEach(name => {
    if (HIDDEN_OPTIONS.indexOf(name) !== -1) {
      return
    }
    result.push(name)
    if (SEPARATOR_AFTER.indexOf(name) !== -1) {
      result.push('___separator___')
    }
  })
  return result
}())

export default class Authoring extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      iframeSrc: ''
    }
    Object.keys(config).forEach(name => {
      let value = config[name]
      if (name === 'startTime' || name === 'endTime') {
        value = (new Date(value)).toISOString()
      }
      this.state[name] = value
    })
  }

  componentDidMount () {
    this.setState({
      iframeSrc: this.finalUrl()
    })
  }

  componentDidUpdate () {
    window.clearTimeout(this._iframeUpdate)
    this._iframeUpdate = setTimeout(() => {
      this.setState({
        iframeSrc: this.finalUrl()
      })
    }, 2000)
  }

  renderCheckbox (name) {
    const toggleOption = () => {
      this.setState({[name]: !this.state[name]})
    }
    return (
      <label key={name}><input type='checkbox' checked={this.state[name]} onChange={toggleOption} /> { camelCaseToWords(name) }</label>
    )
  }

  renderTextInput (name) {
    const setOption = (event) => {
      this.setState({[name]: event.target.value})
    }
    return (
      <label key={name}>{ camelCaseToWords(name) } <input type='text' value={this.state[name]} onChange={setOption} /></label>
    )
  }

  renderConfig () {
    return OPTIONS_WITH_SEPARATORS.map((name, idx) => {
      const value = this.state[name]
      if (name === '___separator___') {
        return <hr key={'sep' + idx} />
      }
      if (typeof value === 'boolean') {
        return this.renderCheckbox(name)
      }
      if (typeof value === 'string' || typeof value === 'number') {
        return this.renderTextInput(name)
      }
    })
  }

  finalUrl () {
    let url = window.location.href.slice()
    url = url.replace('?authoring', '')

    OPTIONS_WITH_SEPARATORS.forEach(name => {
      let value = this.state[name]
      let configValue = config[name]
      if (name === 'startTime' || name === 'endTime') {
        configValue = (new Date(configValue)).toISOString()
      }
      if (value !== configValue) {
        if (value === true) {
          url += `&${name}`
        } else {
          url += `&${name}=${value}`
        }
      }
    })
    // Remove first &, as it's unnecessary and make sure there's ?
    url = url.replace('/&', '/?')
    return url
  }

  render () {
    const { iframeSrc } = this.state
    return (
      <div className='authoring'>
        <h2>Authoring</h2>
        { this.renderConfig() }
        <h3>Final URL</h3>
        <textarea value={this.finalUrl()} readOnly />

        <h3>Preview</h3><commit_msg>Fix authoring preview URL<commit_after>import React, { PureComponent } from 'react'
import config from '../config'

import '../../css/authoring.less'

function camelCaseToWords (name) {
  return name.replace(/([A-Z])/g, ` $1`).toLowerCase()
}

const HIDDEN_OPTIONS = [ 'authoring' ]
const SEPARATOR_AFTER = [ 'logging', 'endTime' ]

const OPTIONS_WITH_SEPARATORS = (function () {
  const result = []
  Object.keys(config).forEach(name => {
    if (HIDDEN_OPTIONS.indexOf(name) !== -1) {
      return
    }
    result.push(name)
    if (SEPARATOR_AFTER.indexOf(name) !== -1) {
      result.push('___separator___')
    }
  })
  return result
}())

export default class Authoring extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      iframeSrc: ''
    }
    Object.keys(config).forEach(name => {
      let value = config[name]
      if (name === 'startTime' || name === 'endTime') {
        value = (new Date(value)).toISOString()
      }
      this.state[name] = value
    })
  }

  componentDidMount () {
    this.setState({
      iframeSrc: this.finalUrl()
    })
  }

  componentDidUpdate () {
    window.clearTimeout(this._iframeUpdate)
    this._iframeUpdate = setTimeout(() => {
      this.setState({
        iframeSrc: this.finalUrl()
      })
    }, 2000)
  }

  renderCheckbox (name) {
    const toggleOption = () => {
      this.setState({[name]: !this.state[name]})
    }
    return (
      <label key={name}><input type='checkbox' checked={this.state[name]} onChange={toggleOption} /> { camelCaseToWords(name) }</label>
    )
  }

  renderTextInput (name) {
    const setOption = (event) => {
      this.setState({[name]: event.target.value})
    }
    return (
      <label key={name}>{ camelCaseToWords(name) } <input type='text' value={this.state[name]} onChange={setOption} /></label>
    )
  }

  renderConfig () {
    return OPTIONS_WITH_SEPARATORS.map((name, idx) => {
      const value = this.state[name]
      if (name === '___separator___') {
        return <hr key={'sep' + idx} />
      }
      if (typeof value === 'boolean') {
        return this.renderCheckbox(name)
      }
      if (typeof value === 'string' || typeof value === 'number') {
        return this.renderTextInput(name)
      }
    })
  }

  finalUrl () {
    let url = window.location.href.slice()
    url = url.replace('?authoring', '')

    OPTIONS_WITH_SEPARATORS.forEach(name => {
      let value = this.state[name]
      let configValue = config[name]
      if (name === 'startTime' || name === 'endTime') {
        configValue = (new Date(configValue)).toISOString()
      }
      if (value !== configValue) {
        if (value === true) {
          url += `&${name}`
        } else {
          url += `&${name}=${value}`
        }
      }
    })
    // Remove first &, as it's unnecessary and make sure there's ?
    url = url.replace('&', '?')
    return url
  }

  render () {
    const { iframeSrc } = this.state
    return (
      <div className='authoring'>
        <h2>Authoring</h2>
        { this.renderConfig() }
        <h3>Final URL</h3>
        <textarea value={this.finalUrl()} readOnly />

        <h3>Preview</h3>
{'fraction_non_alphanumeric': 0.16756414317389928, 'fraction_numerical': 0.004117833386126069, 'mean_word_length': 2.5279329608938546, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 47, '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': '5687996', 'n_tokens_mistral': 2102, 'n_tokens_neox': 2049, 'n_words': 396}