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 || false,
        disabled: false,
        type: "checkbox"
    };

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

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

         // 上下文
         if (antdForm) {
            this.antdForm = antdForm.getContext();
            this.antdForm.state.formItems.push($scope);
        }
        if (antdFormItem) {
            this.antdFormItem = antdFormItem.getContext();
        }
    }

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

    setValue(value) {
        if (value) {
            this.state.checked = value;
        } else {
            this.state.checked = false;
        }
    }
}