import React, { Component } from 'react';
import RoomplanSelector from './RoomplanSelector'
import JSONClientSingleton from './util/JSONClientSingleton'

import './DeviceListView.css';

class DeviceListView extends Component {

  constructor(props) {
    super(props);
    this.state = {
      deviceTypes: [],
      devices: {}
    };
    this.json = new JSONClientSingleton();
  }

  handleListChange = (event) => {
    const checkboxEl = event.target;
    if (checkboxEl.checked && this.props.idxWhitelist.indexOf(checkboxEl.value) < 0) {
      // Add device
      this.props.onWhitelistChange(this.props.idxWhitelist.concat([checkboxEl.value]));
    } else {
      // Remove device
      const result = this.props.idxWhitelist.slice(0);
      result.splice(this.props.idxWhitelist.indexOf(checkboxEl.value), 1);
      this.props.onWhitelistChange(result);
    }
  }

  handleNameChange = (event) => {
    const name = event.target.value;
    this.props.onNameChange(name);
  }

  componentDidMount() {
    this.json.getAllDevices((data) => {
      const devices = {};
      const deviceTypes = [];
      for (let i = 0 ; i < data.result.length; i++) {
        const deviceType = data.result[i]['Type'];
        if (!devices[deviceType]) {
          devices[deviceType] = [];
          deviceTypes.push(deviceType);
        }
        devices[deviceType].push(data.result[i]);
      }
      this.setState({deviceTypes: deviceTypes.sort(), devices: devices, name: this.props.name});
    });
  }

  getUid(device) {
    switch(device.Type) {
      case 'Scene':
        return 's|' + device.idx;
      case 'Group':
        return 'g|' + device.idx;
      default:
        return 'd|' + device.idx;
    }
  }

  renderDeviceTypeSection(type) {
    const devices = this.state.devices[type];
    const list = devices.sort((a, b) => b.Name >= a.Name ? -1 : 1).map(
        function(device) {
          const id = this.getUid(device);
          return (
            <li key={id}><label><input type="checkbox" value={id} onChange={this.handleListChange} checked={this.props.idxWhitelist.indexOf(id) >= 0}/>{device.Name}</label></li>
          );
        }, this);
    return (
      <section key={type}>
        <h3>{type}</h3>
        <ul>{list}</ul>
      </section>
    )
  }

  render() {
    const sections = [];
    for (let i = 0; i < this.state.deviceTypes.length; i++) {
      sections.push(this.renderDeviceTypeSection(this.state.deviceTypes[i]));
    };

    return (
      <div className="DeviceListView">
        <p><label>
          Dashboard name:&nbsp;
          <input type="text" value={this.props.name} name="name" placeholder="Name" onChange={this.handleNameChange} />
        </label></p>
        <span>Tick the devices to show in this dashboard:</span>
        <RoomplanSelector needConfirm={this.props.idxWhitelist &&
            this.props.idxWhitelist.length > 0}
            onWhitelistChange={this.props.onWhitelistChange}/>
        {sections}
      </div>
    );
  }
}

export default DeviceListView;

@@ -321,16 +321,34 @@
 ices: %7B%7D
+,%0A      filter: %22%22
 %0A    %7D;%0A
@@ -993,16 +993,195 @@
 );%0A  %7D%0A%0A
+  handleFilterChange = (event) =%3E %7B%0A    const filter = event.target.value;%0A    this.setState(%7Bfilter: filter%7D);%0A  %7D%0A%0A  clearFilter = () =%3E %7B%0A    this.setState(%7Bfilter: %22%22%7D);%0A  %7D%0A%0A
   compon
@@ -1980,16 +1980,45 @@
 %5Btype%5D;%0A
+    let showSection = false;%0A
     cons
@@ -2146,24 +2146,156 @@
 id(device);%0A
+          if (escape(device.Name).toLowerCase().match(escape(this.state.filter).toLowerCase())) %7B%0A            showSection = true;%0A  
           re
@@ -2297,24 +2297,26 @@
    return (%0A
+  
             
@@ -2487,24 +2487,26 @@
 %3E%0A          
+  
 );%0A        %7D
@@ -2508,17 +2508,122 @@
     
-%7D, this);
+  %7D else %7B%0A            return null;%0A          %7D%0A        %7D, this);%0A    if (!showSection) %7B%0A      return null;%0A    %7D
 %0A   
@@ -3230,16 +3230,226 @@
 %3C/span%3E%0A
+        %3Cp%3E%0A          %3Cinput type=%22text%22 value=%7Bthis.state.filter%7D name=%22filter%22 placeholder=%22Search devices%22 onChange=%7Bthis.handleFilterChange%7D /%3E%3Cbutton onClick=%7Bthis.clearFilter%7D%3EClear%3C/button%3E%0A        %3C/p%3E%0A
         

Add a search filter to the device list page