<script type="text/html" data-template-name="mongodb">
    <div class="form-row">
        <label for="node-config-input-hostname"><i class="fa fa-bookmark"></i><span data-i18n="mongodb.label.host"></span></label>
        <input class="input-append-left" type="text" id="node-config-input-hostname" placeholder="localhost">
    </div>

    <div class="form-row node-config-input-topology">
      <label for="node-config-input-topology"><span data-i18n="mongodb.label.topology"></span></label>
          <select id="node-config-input-topology">
            <option type="button" class="red-ui-button toggle topology-group" selected  value="direct">Direct (mongodb://)</button>
            <option type="button" class="red-ui-button toggle topology-group" value="replicaset">RelicaSet/Cluster (mongodb://)</button>
            <option type="button" class="red-ui-button toggle topology-group" value="dnscluster">DNS Cluster (mongodb+srv://)</button>
          </select>
    </div>

    <div class="form-row node-config-connectOptions">
        <label for="node-config-input-connectOptions"><i class="fa fa-wrench"></i><span data-i18n="mongodb.label.connectOptions"></span></label>
        <input type="text" id="node-config-input-connectOptions">
    </div>

    <div class="form-row node-config-input-port">
        <label for="node-config-input-port"><i class="fa fa-plug"></i><span data-i18n="mongodb.label.port"></span></label>
        <input type="text" id="node-config-input-port" style="width:55px;">
    </div>

    <div class="form-row">
        <label for="node-config-input-db"><i class="fa fa-database"></i> <span data-i18n="mongodb.label.database"></span></label>
        <input type="text" id="node-config-input-db">
    </div>
    <div class="form-row">
        <label for="node-config-input-user"><i class="fa fa-user"></i> <span data-i18n="mongodb.label.username"></span></label>
        <input type="text" id="node-config-input-user">
    </div>
    <div class="form-row">
        <label for="node-config-input-password"><i class="fa fa-lock"></i> <span data-i18n="mongodb.label.password"></span></label>
        <input type="password" id="node-config-input-password">
    </div>
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('mongodb', {
        category: 'config',
        color: "rgb(218, 196, 180)",
        defaults: {
            hostname: {value: "127.0.0.1", required: true},
            topology: {value: "direct", required: true},
            connectOptions: {value: "", required: false},
            port: {value: 27017, required: true},
            db: {value: "", required: true},
            name: {value: ""}
        },
        credentials: {
            user: {type: "text"},
            password: {type: "password"}
        },
        label: function() {
            return this.name || this.db + "@" + this.hostname;
        },
        oneditprepare: function() {
          $("#node-config-input-topology").on("change", function() {
            var topology = $("#node-config-input-topology option:selected").val();
            if (topology === "direct") {
              $(".node-config-input-port").show();
            } else {
              $(".node-config-input-port").hide();
            }
          });
        },
    });
</script>

<script type="text/html" data-template-name="mongodb out">
    <div class="form-row">
        <label for="node-input-mongodb"><i class="fa fa-bookmark"></i> <span data-i18n="mongodb.label.server"></span></label>
        <input type="text" id="node-input-mongodb">
    </div>
    <div class="form-row">
        <label for="node-input-collection"><i class="fa fa-briefcase"></i> <span data-i18n="mongodb.label.collection"></span></label>
        <input type="text" id="node-input-collection">
    </div>
    <div class="form-row">
        <label for="node-input-operation"><i class="fa fa-wrench"></i> <span data-i18n="mongodb.label.operation"></span></label>
        <select type="text" id="node-input-operation" style="display: inline-block; vertical-align: top;">
            <option value="store" data-i18n="mongodb.operation.save"></option>
            <option value="insert" data-i18n="mongodb.operation.insert"></option>
            <option value="update" data-i18n="mongodb.operation.update"></option>
            <option value="delete" data-i18n="mongodb.operation.remove"></option>
        </select>
    </div>
    <div class="form-row node-input-payonly">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-payonly" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-payonly" style="width: 70%;"><span data-i18n="mongodb.label.onlystore"></span></label>
    </div>
    <div class="form-row node-input-upsert">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-upsert" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-upsert" style="width: 70%;"><span data-i18n="mongodb.label.createnew"></span></label>
    </div>
    <div class="form-row node-input-multi">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-multi" style="display: inline-block; width: auto; vertical-align: top;;">
        <label for="node-input-multi" style="width: 70%;"><span data-i18n="mongodb.label.updateall"></span></label>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
    <div class="form-tips" id="node-warning" style="display: none"><span data-i18n="[html]mongodb.tip"></span></div>
</script>

<script type="text/javascript">
    function oneditprepare() {
        $("#node-input-operation").change(function () {
            var id = $("#node-input-operation option:selected").val();

            if (id === "update") {
                $(".node-input-payonly").hide();
                $(".node-input-upsert, .node-input-multi").show();
            } else if (id === "delete") {
                $(".node-input-payonly, .node-input-upsert, .node-input-multi").hide();
            } else {
                $(".node-input-payonly").show();
                $(".node-input-upsert, .node-input-multi").hide();
            }
        });

        $("#node-input-collection").change(function () {
            if($("#node-input-collection").val() === "") {
                $("#node-warning").show();
            } else {
                $("#node-warning").hide();
            }
        });
    }

    RED.nodes.registerType('mongodb out', {
        category: 'storage-output',
        color: "rgb(218, 196, 180)",
        defaults: {
            mongodb: {type: "mongodb", required: true},
            name: {value: ""},
            collection: {value: ""},
            payonly: {value: false},
            upsert: {value: false},
            multi: {value: false},
            operation: {value: "store"}
        },
        inputs: 1,
        outputs: 0,
        icon: "mongodb.png",
        align: "right",
        label: function() {
            var mongoNode = RED.nodes.node(this.mongodb);
            return this.name || (mongoNode ? mongoNode.label() + " " + this.collection : "mongodb");
        },
        labelStyle: function() {
            return this.name ? "node_label_italic" : "";
        },
        oneditprepare: oneditprepare
    });
</script>

<script type="text/html" data-template-name="mongodb in">
    <div class="form-row">
        <label for="node-input-mongodb"><i class="fa fa-bookmark"></i> <span data-i18n="mongodb.label.server"></span></label>
        <input type="text" id="node-input-mongodb">
    </div>
    <div class="form-row">
        <label for="node-input-collection"><i class="fa fa-briefcase"></i> <span data-i18n="mongodb.label.collection"></span></label>
        <input type="text" id="node-input-collection">
    </div>
    <div class="form-row">
        <label for="node-input-operation"><i class="fa fa-wrench"></i> <span data-i18n="mongodb.label.operation"></span></label>
        <select type="text" id="node-input-operation" style="display: inline-block; vertical-align: top;">
            <option value="find" data-i18n="mongodb.operation.find"></option>
            <option value="count" data-i18n="mongodb.operation.count"></option>
            <option value="aggregate" data-i18n="mongodb.operation.aggregate"></option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
    <div class="form-tips" id="node-warning" style="display: none"><span data-i18n="[html]mongodb.tip"></span></div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('mongodb in', {
        category: 'storage-input',
        color: "rgb(218, 196, 180)",
        defaults: {
            mongodb: {type: "mongodb", required: true},
            name: {value: ""},
            collection: {value: ""},
            operation: {value: "find"}
        },
        inputs: 1,
        outputs: 1,
        icon: "mongodb.png",
        label: function() {
            var mongoNode = RED.nodes.node(this.mongodb);
            return this.name || (mongoNode ? mongoNode.label() + " " + this.collection : "mongodb");
        },
        labelStyle: function() {
            return this.name ? "node_label_italic" : "";
        },
        oneditprepare: oneditprepare
    });
</script>