unlayer.registerPropertyEditor({
    name: 'couponType',
    layout: 'bottom',
    Widget: unlayer.createWidget({
      render(value) {
        return `
          <div id="barcodediv" class="blockbuilder-widget blockbuilder-text-widget row">
              <div class="col-12">
                  <div class="blockbuilder-widget-label pb-2">
                      <label class="blockbuilder-label-primary"><span>Coupon Type</span></label>
                  </div>
                  <select id="couponType" name="couponType" class="form-control">
                      <option></option>
                      <option value="static">Enter Static Code</option>
                      <option value="upload">Upload Dynamic Codes</option>
                      <option value="generate">Create Dynamic Codes</option>
                  </select>
              </div>
          </div>
          <div id="barcodediv" class="blockbuilder-widget blockbuilder-text-widget row">
              <div class="col-12">
                  <div class="blockbuilder-widget-label pb-2">
                      <label class="blockbuilder-label-primary"><span>Coupon Type</span></label>
                  </div>
                  <select id="couponType" name="couponType" class="form-control">
                      <option></option>
                      <option value="static">Enter Static Code</option>
                      <option value="upload">Upload Dynamic Codes</option>
                      <option value="generate">Create Dynamic Codes</option>
                  </select>
              </div>
          </div>
          <div id="staticoffer" style="display:none;padding-top:15px;">
            <div class="blockbuilder-text-widget row">
              <div class="col-12">
                  <div class="blockbuilder-widget-label pb-2">
                      <label class="blockbuilder-label-primary"><span>Coupon Code</span></label>
                  </div>
                  <input type="text" name="staticCouponId" id="staticCouponId" value="${(value.staticCouponId != null ? value.staticCouponId : '')}" class="form-control" />
              </div>
            </div>
          </div>
        `
      },
      mount(node, value, updateValue) {
        var getValuesToUpdate = function() {
          return {
            couponType: $("#couponType").val(),
            staticCouponId: $("#staticCouponId").val()
          };
        };

        var handleShowHide = function() {
          switch($("#couponType").val()) {
            case 'static':
              $("#staticoffer").show();
              break;
          }
        };

        $("#couponType").off().on("change",function() {
          postToParent(
            "couponSettingsUpdate",
            {
              field: $(this).attr("id"),
              value: $(this).val()
            }
          );

          handleShowHide();
          updateValue(getValuesToUpdate());
        });

        $("#staticCouponId").off().on("keyup",function(e){
          updateValue(getValuesToUpdate());

          postToParent(
            "couponSettingsUpdate",
            {
              field: $(this).attr("id"),
              value: $(this).val()
            }
          );
        });

        handleShowHide();
     }
    })
  });