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

  angular.module("esNgAntd").directive("antdForm", function (esNgAntd) {

      return {

          controllerAs: "antdForm",

          restrict: "E",
          transclude: true,
          replace: true,
          scope: {
              name: "@",
              labelCol: "=",
              wrapperCol: "=",
              onFinish: "&",

              form: "=",

          },
          template: template,

          controller: function ($scope, $element, $attrs) {

              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.submit = function () {
                  $scope.handleSubmit();
              };
  

              $scope.handleSubmit = function () {
                  let values = {};

                  $scope.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;

                  });

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

              if ($scope.form !== undefined) {
                  $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;
                  }
              }
          },
      };
  });