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);
    }
}