import template from "./Form.html";
import style from "antd/lib/form/style/index.css";

class Form {
    useModules = ["esNgAntd"];

    context = true;

    state = {
        formItems: [],
    };

    constructor($element) {
        esNgAntd.createStyle("ant-form", style);

        if (this.form !== undefined) {
            this.form = $scope;
        }
        
        if (this.props.name) {
            let inputs = $element[0].querySelectorAll("input");
            for (let i = 0; i < inputs.length; i++) {
                const element = inputs[i];
                element.id = this.props.name + "_" + element.id;
            }
        }
    }

    resetFields() {
        this.state.formItems.forEach(function (item) {
            if (typeof item.setValue === "function") {
                item.setValue(item.defaultValue || null);
            } else {
                item.value = null;
            }
        });
    }

    submit() {
        this.handleSubmit();
    }

    handleSubmit() {
        let values = {};
        this.state.formItems.forEach(function (item) {
            let name = item.antdFormItem && item.antdFormItem.name;
            let value = null;
            if (item.state.type === "checkbox") {
                value = item.state.checked;
            } else {
                value = item.value || item.state.value
            }
            values[name] = value;
        });
        this.props.onFinish({
            values: values,
        });
    }

    render() {
        return template;
    }
}

Form.propTypes = {
    name: PropTypes.string,
    labelCol: PropTypes.object,
    wrapperCol: PropTypes.object,
    form: PropTypes.object,
    onFinish: PropTypes.function,
};