import React, { Component } from 'react'
import PropTypes from 'prop-types'

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

        this.handleChange = this.handleChange.bind(this)
    }

    flagActiveSectorModels(activeProperties, availableProperties) {

        for (let i = 0; i < availableProperties.length; i++) {
            availableProperties[i].active = false

            if (activeProperties != null) {
                for (let k = 0; k < activeProperties.length; k++) {
                    if (activeProperties[k] == availableProperties[i].name) {
                        availableProperties[i].active = true
                        break
                    }
                }
            }
        }

        return availableProperties
    }

    handleChange(event) {
        const target = event.target
        const {name, onChange} = this.props

        let newProperties = this.props.activeProperties

        // initialize properties if not already done
        if (newProperties == null && newProperties == undefined) {
            newProperties = []
        }

        // add or remove the property
        if (target.checked) {
            newProperties.push(target.name)
        } else {
            for (let i = 0; i < newProperties.length; i++) {
                if (newProperties[i]== target.name) {
                    newProperties.splice(i, 1)
                    break
                }
            }
        }

        // create an event structure
        let returnEvent = {
            target: {
                name: name,
                value: newProperties,
                type: 'array'
            }
        }

        // send event
        onChange(returnEvent)
    }

    renderProperySelector(selectedProperties) {
        return (
            <div>
                <ul className="list-group">
                    <li className="list-group-item">
                        {
                            Object.keys(selectedProperties).map((i) => (
                                <div className="form-check" key={i}>
                                    <input className="form-check-input" type="checkbox" name={selectedProperties[i].name} key={selectedProperties[i].name} value={selectedProperties[i].name} defaultChecked={selectedProperties[i].active} onClick={this.handleChange}></input>
                                    {selectedProperties[i].name}
                                </div>
                            ))
                        }
                    </li>
                </ul>
            </div>
        )
    }

    renderDanger(message) {
        return (
            <div id="property_selector_alert-danger" className="alert alert-danger">
                {message}
            </div>
        )
    }

    renderWarning(message) {
        return (
            <div id="property_selector_alert-warning" className="alert alert-warning">
                {message}
            </div>
        )
    }

    renderInfo(message) {
        return (
            <div id="property_selector_alert-info" className="alert alert-info">
                {message}
            </div>
        )
    }

    render() {
        const {name, activeProperties, availableProperties} = this.props

        if (availableProperties == null || availableProperties.length == 0) {
            return this.renderInfo('There are no ' + name + ' properties available')
        } else {
            let selectedProperties = this.flagActiveSectorModels(activeProperties, availableProperties)
            return this.renderProperySelector(selectedProperties)
        }
    }
}

PropertySelector.propTypes = {
    name: PropTypes.string,
    activeProperties: PropTypes.array,
    availableProperties: PropTypes.array,
    onChange: PropTypes.func
}

export default PropertySelector

@@ -301,35 +301,52 @@
         
-for (let i = 0; i %3C
+// compose list of unique active and
  availab
@@ -339,33 +339,34 @@
 ve and available
-P
+ p
 roperties.length
@@ -362,325 +362,405 @@
 ties
-.length; i++) %7B%0A            availableProperties%5Bi%5D.active = false%0A%0A            if (activeProperties != null) %7B%0A                for (let k = 0; k %3C activeProperties.length; k++) %7B%0A                    if (activeProperties%5Bk%5D == availableProperties%5Bi%5D.name) %7B%0A                        availableProperties%5Bi%5D.active = true
+%0A        let available_prop_names = availableProperties.map(availableProperties =%3E availableProperties.name)%0A        let unique_properties = activeProperties.concat(available_prop_names).filter((v, i, a) =%3E (a.indexOf(v) === i))%0A%0A        // compose object with active and valid flags%0A        let flagged_props = %5B%5D%0A        for (var propname of unique_properties) %7B%0A            flagged_props.push(%7B
 %0A   
@@ -768,38 +768,47 @@
             
- 
+name: propname,%0A
        
-break%0A
             
@@ -800,37 +800,90 @@
             
-     
+active: activeProperties.includes(propname) ? true : false,%0A
       
-%7D%0A
             
@@ -872,39 +872,93 @@
                 
-      %7D
+valid: available_prop_names.includes(propname) ? true : false
 %0A            %7D%0A 
@@ -947,32 +947,33 @@
 se%0A            %7D
+)
 %0A        %7D%0A%0A    
@@ -983,34 +983,28 @@
  return 
-availablePropertie
+flagged_prop
 s%0A    %7D%0A
@@ -2351,303 +2351,1003 @@
 nput
- className=%22form-check-input%22 type=%22checkbox%22 name=%7BselectedProperties%5Bi%5D.name%7D key=%7BselectedProperties%5Bi%5D.name%7D value=%7BselectedProperties%5Bi%5D.name%7D defaultChecked=%7BselectedProperties%5Bi%5D.active%7D onClick=%7Bthis.handleChange%7D%3E%3C/input%3E%0A                                    %7BselectedProperties%5Bi%5D.name%7D
+%0A                                        className=%22form-check-input%22%0A                                        type=%22checkbox%22%0A                                        name=%7BselectedProperties%5Bi%5D.name%7D%0A                                        key=%7BselectedProperties%5Bi%5D.name%7D%0A                                        value=%7BselectedProperties%5Bi%5D.name%7D%0A                                        defaultChecked=%7BselectedProperties%5Bi%5D.active%7D%0A                                        onClick=%7Bthis.handleChange%7D%3E%0A                                    %3C/input%3E%0A                                    %7B%0A                                        selectedProperties%5Bi%5D.valid ?%0A                                            selectedProperties%5Bi%5D.name%0A                                            :%0A                                            %3Cstrike%3E%0A                                                %7BselectedProperties%5Bi%5D.name%7D%0A                                            %3C/strike%3E%0A                                    %7D%0A
 %0A   

Enable PropertySelector to disable unavailable props