<script type="text/javascript">
    RED.nodes.registerType('<%= NODES_PREFIX %>-yeelight configurator', {
        category: 'config',
        defaults: {
            name: {value: ""},
            ip: {value: ""},
            sid: {value: ""}
        },
        label: function () {
            return this.name || "yeelight configurator";
        },
        oneditprepare: function() {
            RED.settings.miDevicesYeelightConfiguratorDiscoveredBulbs.forEach(function(bulb, index) {
                $('#discovered-bulbs').append('<option value="' + bulb.sid + '">' + (bulb.name || bulb.sid) + ' - ' + bulb.model + ' - ' + bulb.ip + '</option>');
            });
            var node = this;
            $('#discovered-bulbs').on('change', function() {
                var sid = $('#discovered-bulbs').val();
                var bulb = sid && RED.settings.miDevicesYeelightConfiguratorDiscoveredBulbs.filter(function(e) { return e.sid == sid })[0];
                $("#node-config-input-name").val(bulb && bulb.name);
                $("#node-config-input-sid").val(bulb && bulb.sid);
                $("#node-config-input-ip").val("");
            });
        }
    });
</script>

<script type="text/x-red" data-template-name="<%= NODES_PREFIX %>-yeelight configurator">
    <div class="form-row">
        <label for="discovered-bulbs"><i class="fa fa-search"></i> Found bulbs</label>
        <select id="discovered-bulbs">
            <option>- Select -</option>
        </select>
    </div>
    <hr>
    <div class="form-row">
        <label for="node-config-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-config-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-config-input-ip"><i class="fa fa-compass"></i> IP</label>
        <input type="text" id="node-config-input-ip" placeholder="IP">
    </div>
    <div class="form-row">
        <label for="node-config-input-sid"><i class="fa fa-barcode"></i> SID</label>
        <input type="text" id="node-config-input-sid" placeholder="sid">
    </div>
    <p>Note: use <code>ip</code> or <code>sid</code> - <code>sid</code> is better.</p>
</script>

<script type="text/x-red" data-help-name="<%= NODES_PREFIX %>-yeelight configurator">
    <p>Xiaomi Yeelight configuration node.</p>
    <h3>Details</h3>
    <p>This configuration node is used by the Yeelight nodes. Here you can add
    devices with their device-id (SID), type and a description.</p>
    <p>At the moment the following devices are supported:
    <lu>
        <li>Humidity & Temperature sensor [sensor ht/]</li>
        <li>Body motion sensor [motion]</li>
        <li>Magnet contact sensor [contact]</li>
        <li>Wall socket plug (zigbee) [plug]</li>
        <li>Push button [switch]</li>
    </lu>
    </p>
    <p>To be able to receive messages from the Xiaomi gateway, you need to set the gateway
    in developer mode. Once in developer mode, the gateway sends JSON messages over the network as
    UDP packages. On the internet their are a lot of guides on how to put the gateway in developer mode.</p>
    <p>If you want to use the wall sockets, you need to set the key from the gateway. The key can be
    retrieved via the Xiaomi Home App when in developer mode. Enter the key here and it is used
    together with the token from the gateway's heartbeat message to recalculate the key to switch
    the plug. If you do not specify a key, the plug-node can not be used.</p>

</script>
