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

class Checkbox {
    useModules = ["esNgAntd"];

    require = ["^?antdForm", "^?antdFormItem"];

    state = {
        checked: this.props.checked || this.props.defaultChecked || false,
        disabled: false,
        type: "checkbox",
    };

    constructor($element, $attrs, $controllers) {
        let [antdForm, antdFormItem] = $controllers;

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

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

    componentDidUpdate(prevProps) {
        if (prevProps.checked !== this.props.checked) {
            if (newVal !== undefined) {
                this.state.checked = ["true", "checked", true].includes(newVal)
                    ? true
                    : false;
            }
        }
        if (prevProps.disabled !== this.props.disabled) {
            if (newVal !== undefined) {
                this.state.disabled = ["true", "disabled", true].includes(
                    newVal
                )
                    ? true
                    : false;
            }
        }
    }

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

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

    render() {
        return template;
    }
}

Checkbox.propTypes = {
    defaultChecked: PropTypes.boolean,
    checked: PropTypes.string,
    disabled: PropTypes.string,
    onChange: PropTypes.function,
};