import template from "./Checkbox.html";
  import style from "antd/lib/checkbox/style/index.css";
  
  class Checkbox {

      useModules = ["esNgAntd"];
  
      template = template;
  
      props = {
          defaultChecked: Boolean,
          checked: Boolean,
          disabled: Boolean,
          onChange: Function,
      };
  
      state = {
          checked: this.props.checked || this.props.defaultChecked,

          disabled: false,
      };

  
      watch = {
          checked: function (newValue) {
              if (newValue !== undefined) {
                  this.state.checked = newValue === "true" ? true : false;
              }
          },
          disabled: function (newValue) {
              if (newValue !== undefined) {

                  this.state.disabled =
                      newValue === "true" || newValue === "disabled"
                          ? true
                          : false;

              }

          },
      };

  
      handleClick($event) {
          this.state.checked = !this.state.checked;

          this.props.onChange({ event: $event });

      }
  
      constructor() {
          esNgAntd.createStyle("ant-checkbox", style);
      }
  }