<script type="text/x-red" data-template-name="wemo in">
    <div class="form-row">
        <label for="node-input-topic"><i class="fa fa-tasks"></i> Topic</label>
        <input type="text" id="node-input-topic" placeholder="Topic">
    </div>

    <br/>
    <div class="form-row">
        <label for="node-input-device"><i class="fa fa-tasks"></i> Device</label>
        <input type="text" id="node-input-device" placeholder="Device">
    </div>
    <br/>
    <!-- By convention, most nodes have a 'name' property. The following div -->
    <!-- provides the necessary field. Should always be the last option      -->
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="wemo in">
  <p>A node that listens to event notifications from Belkin WeMo devices.</p>
  <p>Supported devices include:</p>
  <ul>
    <li>Sockets</li>
    <li>Insight Sockets</li>
    <li>Light Bulbs</li>
    <li>Light Groups</li>
    <li>Motion Detector</li>
  </ul>
  <p>Sockets will generate msg.payload with values of 0 or 1 (for off or on).</p> 
  <p>Insight sockets will return an object like this (where state can also be 8 at standby):</p>
  <pre>
  {
    state: "1"
    onSince: 1611180205
    onFor: 853
    onToday: 18284
    onTotal: 48785
    averagePower: 12
    power: 0
    energyToday: 3772853
    energyTotal: 10142468
    sid: "uuid:adebe0c4-1dd1-11b2-8779-d6b6d5a8a932"
    type: "socket"
    name: "WeMo Insight"
    id: "221536K12000B4"
  }
  </pre>
  <p>Lights will return an object like this:</p>
  <pre>
  {
    name: 'Bedroom light',
    type: 'light',
    id: '94103EA2B27803ED',
    capability: '1006',
    value: 1
  }
  </pre>
  <p>Current known capabilities</p>
  <ul>
    <li>10006 - on/off</li>
    <li>10008 - brightness</li>
    <li>10300 - color</li>
    <li>30301 - color temperature</li>
  </ul>
</script>

<script type="text/javascript">
    RED.nodes.registerType('wemo in',{
        category: 'input',      // the palette category
        defaults: {             // defines the editable properties of the node
            name: {value:""},   //  along with default values.
            topic: {value:"wemo", required: true},
            device: {value:"", type: "wemo-dev"},
            label: {value:""}
        },
        color: "LawnGreen",
        inputs:0,               // set the number of inputs - only 0 or 1
        outputs:1,              // set the number of outputs - 0 to n
        // set the icon (held in icons dir below where you save the node)
        icon: "belkin.png",     // saved in  icons/myicon.png
        label: function() {     // sets the default label contents
            if (this.name){
                return this.name;
            } else {
                return this.label||"wemo";
            }
        },
        labelStyle: function() { // sets the class to apply to the label
            return this.name?"node_label_italic":"";
        },
        oneditsave: function(){
            this.label = $('#node-input-device option:selected').text();
        }
    });
</script>

<script type="text/x-red" data-template-name="wemo out">
    <div class="form-row">
        <label for="node-input-device"><i class="fa fa-tasks"></i> Device</label>
        <input type="text" id="node-input-device" placeholder="Device">
    </div>
    <br/>
    <!-- By convention, most nodes have a 'name' property. The following div -->
    <!-- provides the necessary field. Should always be the last option      -->
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="wemo out">
  <p>A node to control Belkin WeMo Devices</p>
  <p>Supported devices include:</p>
  <ul>
    <li>Sockets</li>
    <li>Insight Sockets</li>
    <li>Light Bulbs</li>
  </ul>
  <p>Sets the device on or off based on the passed in msg.payload values of:</p>
  <ul>
    <li>on/off</li>
    <li>1/0</li>
    <li>true/false</li>
  </ul>
  <p>for light bulbs it also accepts an object with the following structure</p>
  <pre>
  {
    state: 1,
    dim: 255,
    color: '255,255,255',
    temperature: 25000
  }
  </pre>
  <p>color control is still a work in progress, but the rest should work</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('wemo out',{
        category: 'output',      // the palette category
        defaults: {             // defines the editable properties of the node
            name: {value:""},   //  along with default values.
            device: {type: "wemo-dev", required: true},
            label: {value: ""}
        },
        color: "LawnGreen",
        inputs: 1,               // set the number of inputs - only 0 or 1
        // set the icon (held in icons dir below where you save the node)
        icon: "belkin.png",     // saved in  icons/myicon.png
        label: function() {     // sets the default label contents
            if (this.name){
                return this.name;
            } else {
                return this.label||"wemo";
            }
        },
        labelStyle: function() { // sets the class to apply to the label
            return this.name?"node_label_italic":"";
        },
        oneditsave: function(){
            this.label = $('#node-input-device option:selected').text();
        }
    });
</script>

<script type="text/x-red" data-template-name="wemo lookup">
    <div class="form-row">
        <label for="node-input-device"><i class="fa fa-tasks"></i> Device</label>
        <input type="text" id="node-input-device" placeholder="Device">
    </div>
    <br/>
    <!-- By convention, most nodes have a 'name' property. The following div -->
    <!-- provides the necessary field. Should always be the last option      -->
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="wemo lookup">
    <p>This node queries the current state of a device</p>
    <p>For sockets it returns a msg.payload that looks like this:</p>
<pre>{
  state: 0
}</pre>
    <p>For insight sockets it returns a msg.payload that contains extra power parameters:</p>
<pre>{
  state: 0,
  onSince: 1611179325,
  onFor: 2545,
  onToday: 17432,
  onTotal: 47939,
  averagePower: 13,
  power: 3.205,
  energyToday: 3596536,
  energyTotal: 9966151
}</pre>
    <p>For lights it returns a msg.payload that looks like this:</p>
<pre>{
  available: true,
  state: 0,
  dim: 13
}</pre>
    <p>Where <em>available</em> is if the blub is actually turned on
    at the wall switch<p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('wemo lookup',{
        category: 'function',      // the palette category
        defaults: {             // defines the editable properties of the node
            name: {value:""},   //  along with default values.
            device: {type: "wemo-dev", required: true},
            label: {value:""}
        },
        color: "LawnGreen",
        inputs: 1,               // set the number of inputs - only 0 or 1
        outputs: 1,
        // set the icon (held in icons dir below where you save the node)
        icon: "belkin.png",     // saved in  icons/myicon.png
        label: function() {     // sets the default label contents
            if (this.name){
                return this.name;
            } else {
                return this.label||"wemo";
            }
        },
        labelStyle: function() { // sets the class to apply to the label
            return this.name?"node_label_italic":"";
        },
        oneditsave: function(){
            this.label = $('#node-input-device option:selected').text();
        }
    });
</script>

<script type="text/x-red" data-template-name="wemo-dev">
    <div class="form-row">
        <label for="node-config-input-device"><i class="fa fa-tasks"></i> Device</label>
        <select size="4" id="node-config-input-device">
        </select>
    </div>
    <br/>
    <div class="form-row">
      <label for="node-config-input-type"><i class="fa fa-tasks"></i> Type</label>
      <input type="text" editable="false" id="node-config-input-type" placeholder="Type"/>
      <input type="hidden" editable="false"  id="node-config-input-name"/>
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('wemo-dev',{
        category: 'config',      // the palette category
        defaults: {             // defines the editable properties of the node
            device: {value:"", required: true},   //  along with default values.
            name: {value: ""}
        },
        label: function() {     // sets the default label contents
            return this.name;
        },
        oneditprepare: function() {
            var devices;
            $.getJSON('wemoNG/devices', function(data) {
                devices = data;
                var devs = Object.keys(data);
                if (devs.length !== 0) {
                    for (var d in devs) {
                        if (devs.hasOwnProperty(d)) {
                            $('<option/>',{
                                'value': devs[d],
                                'text': data[devs[d]].name
                            }).appendTo('#node-config-input-device');
                            console.log(data[devs[d]].name);
                        }
                    }
                }
            });

            $('#node-config-input-device').change(function() {
                var id = $( "#node-config-input-device option:selected" ).first().val();
                if (devices) {
                    $('#node-config-input-type').val(devices[id].type);
                    $('#node-config-input-name').val(devices[id].name);
                }
            });
        }
    });
</script>