<commit_before>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import update from 'immutability-helper'

import PropertyList from '../General/PropertyList'

class ScenarioConfigForm extends Component {
    constructor(props) {
        super(props)

        this.handleKeyPress = this.handleKeyPress.bind(this)
        this.handleFacetChange = this.handleFacetChange.bind(this)
        this.handleChange = this.handleChange.bind(this)
        this.handleSave = this.handleSave.bind(this)
        this.handleCancel = this.handleCancel.bind(this)

        this.state = {}
        this.state.selectedScenario = this.props.scenario
        this.state.currentFacet = 0
    }

    componentDidMount(){
        document.addEventListener("keydown", this.handleKeyPress, false)
    }

    componentWillUnmount(){
        document.removeEventListener("keydown", this.handleKeyPress, false)
    }

    handleKeyPress(){
        if(event.keyCode === 27) {
            this.handleCancel()
        }
    }

    handleFacetChange(event) {
        const target = event.target
        const value = target.type === 'checkbox' ? target.checked : target.value
        const name = target.name

        console.log(name)
        console.log(value)

        this.state.currentFacet = name
        this.forceUpdate()
    }

    handleChange(event) {
        const target = event.target
        const value = target.type === 'checkbox' ? target.checked : target.value
        const name = target.name

        if (name.startsWith('facet_')) {
            this.state.selectedScenario.facets[this.state.currentFacet][name.slice(6)] = value
        } else {
            this.state.selectedScenario[name] = value
        }

        this.forceUpdate()
    }

    handleSave() {
        this.props.saveScenario(this.state.selectedScenario)
    }

    handleCancel() {
        this.props.cancelScenario()
    }

    render() {
        const {selectedScenario, currentFacet} = this.state
        const {scenario} = this.props

        console.log(selectedScenario)

        let editMode = true
        if (scenario.name === undefined) editMode = false

        let facetNav = []
        for (let i=0; i < selectedScenario.facets.length; i++) {
            facetNav.push(<li className={'page-item-' + i}><a className="page-link" name={i} onClick={this.handleFacetChange}>{i+1}</a></li>)
        }

        return (
            <div>
                <div className="card">
                    <div className="card-header">General</div>
                    <div className="card-body">

                        <div className="form-group row">
                            <label className="col-sm-2 col-form-label">Name</label>
                            <div className="col-sm-10">
                                <input id="scenario_name" className="form-control" name="name" type="text" disabled={editMode} defaultValue={selectedScenario.name} onChange={this.handleChange}/>
                            </div>
                        </div>

                        <div className="form-group row">
                            <label className="col-sm-2 col-form-label">Description</label>
                            <div className="col-sm-10">
                                <textarea id="scenario_description" className="form-control" name="description" rows="5" defaultValue={selectedScenario.description} onChange={this.handleChange}/>
                            </div>
                        </div>

                    </div>
                </div>

                <br/><commit_msg>each generated element must have a unique id<commit_after>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import update from 'immutability-helper'

import PropertyList from '../General/PropertyList'

class ScenarioConfigForm extends Component {
    constructor(props) {
        super(props)

        this.handleKeyPress = this.handleKeyPress.bind(this)
        this.handleFacetChange = this.handleFacetChange.bind(this)
        this.handleChange = this.handleChange.bind(this)
        this.handleSave = this.handleSave.bind(this)
        this.handleCancel = this.handleCancel.bind(this)

        this.state = {}
        this.state.selectedScenario = this.props.scenario
        this.state.currentFacet = 0
    }

    componentDidMount(){
        document.addEventListener("keydown", this.handleKeyPress, false)
    }

    componentWillUnmount(){
        document.removeEventListener("keydown", this.handleKeyPress, false)
    }

    handleKeyPress(){
        if(event.keyCode === 27) {
            this.handleCancel()
        }
    }

    handleFacetChange(event) {
        const target = event.target
        const value = target.type === 'checkbox' ? target.checked : target.value
        const name = target.name

        console.log(name)
        console.log(value)

        this.state.currentFacet = name
        this.forceUpdate()
    }

    handleChange(event) {
        const target = event.target
        const value = target.type === 'checkbox' ? target.checked : target.value
        const name = target.name

        if (name.startsWith('facet_')) {
            this.state.selectedScenario.facets[this.state.currentFacet][name.slice(6)] = value
        } else {
            this.state.selectedScenario[name] = value
        }

        this.forceUpdate()
    }

    handleSave() {
        this.props.saveScenario(this.state.selectedScenario)
    }

    handleCancel() {
        this.props.cancelScenario()
    }

    render() {
        const {selectedScenario, currentFacet} = this.state
        const {scenario} = this.props

        console.log(selectedScenario)

        let editMode = true
        if (scenario.name === undefined) editMode = false

        let facetNav = []
        for (let i=0; i < selectedScenario.facets.length; i++) {
            facetNav.push(<li className={'page-item-' + i} key={i}><a className="page-link" name={i} onClick={this.handleFacetChange}>{i+1}</a></li>)
        }

        return (
            <div>
                <div className="card">
                    <div className="card-header">General</div>
                    <div className="card-body">

                        <div className="form-group row">
                            <label className="col-sm-2 col-form-label">Name</label>
                            <div className="col-sm-10">
                                <input id="scenario_name" className="form-control" name="name" type="text" disabled={editMode} defaultValue={selectedScenario.name} onChange={this.handleChange}/>
                            </div>
                        </div>

                        <div className="form-group row">
                            <label className="col-sm-2 col-form-label">Description</label>
                            <div className="col-sm-10">
                                <textarea id="scenario_description" className="form-control" name="description" rows="5" defaultValue={selectedScenario.description} onChange={this.handleChange}/>
                            </div>
                        </div>

                    </div>
                </div>

                <br/>
{'fraction_non_alphanumeric': 0.1184702785090758, 'fraction_numerical': 0.003602604960509907, 'mean_word_length': 1.9163636363636363, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 55, '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': '6542910', 'n_tokens_mistral': 1968, 'n_tokens_neox': 1891, 'n_words': 347}