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