import template from "./Form.html";
import style from "antd/lib/form/style/index.css";
angular.module("esNgAntd").directive("antdForm", ["esNgAntd", function (esNgAntd) {
  return {
    template: template,
    restrict: "E",
    replace: true,
    transclude: true,
    scope: {
      name: "@",
      labelCol: "=",
      wrapperCol: "=",
      form: "=",
      onFinish: "&"
    },
    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.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) {
      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;
        }
      }
    }
  };
}]);