import template from "./Checkbox.html";
import style from "antd/lib/checkbox/style/index.css";
angular.module("esNgAntd").directive("antdCheckbox", function (esNgAntd) {
    return {
        controllerAs: "antdCheckbox",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            defaultChecked: "@",
            checked: "@",
            disabled: "@",
            onChange: "&",
        },
        template: template,
        controller: function ($scope, $element, $attrs) {
            this.getContext = function () {
                return $scope;
            };

            $scope.state = {
                checked: $scope.checked || $scope.defaultChecked || false,
                disabled: false,
                type: "checkbox",
            };
            $scope.watch = {
                checked: function (newValue) {
                    if (newValue !== undefined) {
                        $scope.state.checked =
                            newValue === "true" ? true : false;
                    }
                },
                disabled: function (newValue) {
                    if (newValue !== undefined) {
                        $scope.state.disabled =
                            newValue === "true" || newValue === "disabled"
                                ? true
                                : false;
                    }
                },
            };

            for (const key in $scope.watch) {
                $scope.$watch(key, $scope.watch[key], true);
            }

            $scope.handleClick = function ($event) {
                $scope.state.checked = !$scope.state.checked;
                $scope.onChange({
                    event: $event,
                });
            };

            $scope.setValue = function (value) {
                if (value) {
                    $scope.state.checked = value;
                } else {
                    $scope.state.checked = false;
                }
            };
        },
        require: ["?^antdForm", "?^antdFormItem"],
        link: function ($scope, $element, $attrs, $controllers, $transclude) {
            let [antdForm, antdFormItem] = $controllers;
            esNgAntd.createStyle("ant-checkbox", style); // 上下文

            if (antdForm) {
                $scope.antdForm = antdForm.getContext();
                $scope.antdForm.state.formItems.push($scope);
            }

            if (antdFormItem) {
                $scope.antdFormItem = antdFormItem.getContext();
            }
        },
    };
});