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: this.props.disabled
    }

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

    handleClick($event) {
        this.state.checked = !this.state.checked;
        this.props.onChange({event: $event})
    }

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