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: "&",
        },
        template: template,
        controller: function ($scope, $element) {
            this.getContext = function () {
                return $scope;
            };

            $scope.state = {};

            $scope.handleSubmit = function () {
                let values = {};
                let inputs = $element[0].querySelectorAll("input");

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

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