import _Button from "antd/es/button";
import _Divider from "antd/es/divider";
import _Row from "antd/es/row";
import _Col from "antd/es/col";
import _extends from "@babel/runtime/helpers/extends";
import _Checkbox from "antd/es/checkbox";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["isGroup", "isControlAll", "isLinkGroup", "controlAllContet", "isGroupRow", "ColNum", "style", "ref", "children", "onChange", "disabled", "checked", "defaultChecked", "defaultCheckedChecked", "indeterminate", "Options", "autoFocus", "value"];
import * as React from 'react';
import { useState } from 'react';
import "./index.less";
var antCheckbox = function antCheckbox(_ref) {
  var isGroup = _ref.isGroup,
    isControlAll = _ref.isControlAll,
    isLinkGroup = _ref.isLinkGroup,
    controlAllContet = _ref.controlAllContet,
    isGroupRow = _ref.isGroupRow,
    ColNum = _ref.ColNum,
    style = _ref.style,
    ref = _ref.ref,
    children = _ref.children,
    onChange = _ref.onChange,
    disabled = _ref.disabled,
    checked = _ref.checked,
    defaultChecked = _ref.defaultChecked,
    defaultCheckedChecked = _ref.defaultCheckedChecked,
    indeterminate = _ref.indeterminate,
    Options = _ref.Options,
    autoFocus = _ref.autoFocus,
    value = _ref.value,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _style = style || {};
  _style['width'] = _style['width'] ? _style['width'] : '300px';
  var _otherProps = otherProps || {};
  _otherProps.style = _style;
  // eslint-disable-next-line react-hooks/rules-of-hooks
  //单个Checked的value
  var _useState = useState(false),
    singleChecked = _useState[0],
    setSingleChecked = _useState[1];
  var _useState2 = useState(false),
    Indeterminate = _useState2[0],
    setIndeterminate = _useState2[1];
  var _useState3 = useState([]),
    CheckedList = _useState3[0],
    setCheckedList = _useState3[1];
  var _useState4 = useState(false),
    CheckAll = _useState4[0],
    setCheckAll = _useState4[1];
  //联动示例的------------------------------------
  var _useState5 = useState(true),
    checked01 = _useState5[0],
    setChecked01 = _useState5[1];
  var _useState6 = useState(false),
    disabled01 = _useState6[0],
    setDisabled01 = _useState6[1];
  //-------------------------------------------

  var defaultComponent = function defaultComponent() {
    //单选复选框属性
    var defaultProps = {
      style: style,
      ref: ref,
      // defaultChecked,
      disabled: disabled,
      autoFocus: autoFocus,
      // checked: singleChecked, //受控是否选中
      indeterminate: indeterminate,
      onChange: onChangeSelf
    };
    !checked ? defaultProps.defaultChecked = defaultChecked : defaultProps.checked = singleChecked;
    function onChangeSelf(e) {
      setSingleChecked(e.target.checked);
    }
    return /*#__PURE__*/React.createElement(_Checkbox, defaultProps, children);
  };
  //多选框
  var isGroupComponent = function isGroupComponent() {
    var isGroupProps = {
      disabled: disabled,
      onChange: onChange
      // style,
    };

    if ((value === null || value === void 0 ? void 0 : value[0]) !== '') {
      (value === null || value === void 0 ? void 0 : value.length) >= 0 ? isGroupProps.value = [].concat(value) : isGroupProps.defaultValue = defaultCheckedChecked !== undefined ? [].concat(defaultCheckedChecked) : [];
    } else {
      isGroupProps.defaultValue = [].concat(defaultCheckedChecked);
    }
    function isGroupRowComponent() {
      var Options01 = [];
      for (var i = 0, j = Options.length; i < j; i += ColNum) {
        Options01.push(Options.slice(i, i + ColNum));
      }
      var spanNum = 24 / ColNum;
      spanNum = Math.trunc(spanNum);
      function RowCom() {
        var extendsProps = {
          value: CheckedList,
          onChange: onCheck
        };
        var isGroupProps01 = {};
        if (isControlAll) {
          isGroupProps01 = _extends({}, isGroupProps, extendsProps);
        } else {
          isGroupProps01 = _extends({}, isGroupProps);
        }
        console.log(isGroupProps01, '----isGroupProps01');
        return /*#__PURE__*/React.createElement(_Checkbox.Group, _extends({
          style: {
            width: '100%'
          }
        }, isGroupProps01), Options01.map(function (item) {
          return /*#__PURE__*/React.createElement(_Row, null, item.map(function (i) {
            return /*#__PURE__*/React.createElement(_Col, {
              span: spanNum
            }, /*#__PURE__*/React.createElement(_Checkbox, {
              value: i.value
            }, i.label));
          }));
        }));
      }
      return /*#__PURE__*/React.createElement("div", {
        style: style
      }, isControlAll ? /*#__PURE__*/React.createElement("div", null, commandCom(), RowCom()) : RowCom());
    }
    function getEvalue() {
      //获取options的全部value
      var eValue = [];
      Options.forEach(function (item) {
        eValue.push(item === null || item === void 0 ? void 0 : item.value);
      });
      return eValue;
    }
    function onCheckAllChange(e) {
      var eValue = getEvalue();
      setCheckedList(e.target.checked ? eValue : []);
      setIndeterminate(false);
      setCheckAll(e.target.checked);
    }
    function onCheck(list) {
      var eValue = getEvalue();
      setCheckedList(list);
      setIndeterminate(!!list.length && list.length < eValue.length);
      setCheckAll(list.length === eValue.length);
    }
    function commandCom() {
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Checkbox, {
        indeterminate: Indeterminate,
        onChange: onCheckAllChange,
        checked: CheckAll
      }, controlAllContet), /*#__PURE__*/React.createElement(_Divider, null));
    }
    function isGroupSingleComponent() {
      isGroupProps.options = Options;
      console.log(isGroupProps, '-----------isGroupProps');
      return /*#__PURE__*/React.createElement("div", {
        style: style
      }, isControlAll ? /*#__PURE__*/React.createElement("div", null, commandCom(), /*#__PURE__*/React.createElement(_Checkbox.Group, _extends({}, isGroupProps, {
        value: CheckedList,
        onChange: onCheck
      }))) : /*#__PURE__*/React.createElement(_Checkbox.Group, isGroupProps));
    }
    return isGroupRow ? isGroupRowComponent() : isGroupSingleComponent();
  };
  //联动多选框示例
  var Example = function Example() {
    function toggleChecked() {
      setChecked01(!checked01);
    }
    ;
    function toggleDisable() {
      setDisabled01(!disabled01);
    }
    ;
    function onChange(e) {
      console.log('checked = ', e.target.checked);
      setChecked01(e.target.checked);
    }
    ;
    var label = (checked01 ? 'Checked' : 'Unchecked') + "-" + (disabled01 ? 'Disabled' : 'Enabled');
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
      style: {
        marginBottom: '20px'
      }
    }, /*#__PURE__*/React.createElement(_Checkbox, {
      checked: checked01,
      disabled: disabled01,
      onChange: onChange
    }, label)), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Button, {
      type: "primary",
      size: "small",
      onClick: toggleChecked
    }, !checked01 ? 'Check' : 'Uncheck'), /*#__PURE__*/React.createElement(_Button, {
      style: {
        margin: '0 10px'
      },
      type: "primary",
      size: "small",
      onClick: toggleDisable
    }, !disabled01 ? 'Disable' : 'Enable')));
  };
  return isLinkGroup ? Example() : isGroup ? isGroupComponent() : defaultComponent();
};
antCheckbox.displayName = 'antCheckbox';
export default antCheckbox;