import template from "./Form.html";
import style from "antd/lib/form/style/index.css";
angular.module("esNgAntd").directive("esForm", function (esNgAntd) {
    return {
        controllerAs: "esForm",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            name: "@",
            labelCol: "=",
            wrapperCol: "=",
            onFinish: "&",
            form: "=",
        },
        template: template,
        controller: function ($scope, $element) {
            this.getContext = function () {
                return $scope;
            };

            $scope.state = {
                formItems: [],
            };

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

            $scope.handleSubmit = function () {
                let values = {};
                $scope.state.formItems.forEach(function (item) {
                    let name = item.esFormItem && item.esFormItem.name;
                    let value = item.value || item.state.value || null;
                    values[name] = value;
                }); // for (let i = 0; i < inputs.length; i++) {
                //     const element = inputs[i];
                //     const value = element.value === "" ? null : element.value;
                //     if (element.id) {
                //         if (element.id.split("_").length > 1) {
                //             values[element.id.split("_")[1]] = value;
                //         } else {
                //             values[element.id] = value;
                //         }
                //     }
                // }

                $scope.onFinish({
                    values: values,
                });
            };
        },
        link: function ($scope, $element, $attrs, $controllers, $transclude) {
            esNgAntd.createStyle("ant-form", style);
            $scope.form = $scope;

            if ($scope.name) {
                let inputs = $element[0].querySelectorAll("input");

                for (let i = 0; i < inputs.length; i++) {
                    const element = inputs[i];
                    element.id = $scope.name + "_" + element.id;
                }
            }
        },
    };
});