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 _Checkbox from "antd/es/checkbox";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["isGroup", "isControlAll", "isLinkGroup", "controlAllContet", "isGroupRow", "ColNum", "style", "ref", "children", "onNewChange", "disabled", "checked", "defaultChecked", "defaultCheckedChecked", "indeterminate", "Options", "autoFocus", "value", "CheckStyleHeight", "CheckStyleWidth", "checkBorderColor", "checkgroundColor", "checkedgroundColor", "CheckSpanWidth", "displayStyle"],
  _excluded2 = ["color", "fontSize", "fontWeight", "height", "opacity", "textAlign"];
import * as React from 'react';
import { useState, useEffect } 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,
    onNewChange = _ref.onNewChange,
    disabled = _ref.disabled,
    checked = _ref.checked,
    defaultChecked = _ref.defaultChecked,
    defaultCheckedChecked = _ref.defaultCheckedChecked,
    indeterminate = _ref.indeterminate,
    Options = _ref.Options,
    autoFocus = _ref.autoFocus,
    value = _ref.value,
    CheckStyleHeight = _ref.CheckStyleHeight,
    CheckStyleWidth = _ref.CheckStyleWidth,
    checkBorderColor = _ref.checkBorderColor,
    checkgroundColor = _ref.checkgroundColor,
    checkedgroundColor = _ref.checkedgroundColor,
    CheckSpanWidth = _ref.CheckSpanWidth,
    displayStyle = _ref.displayStyle,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _style = _extends({}, style) || {};
  var _otherProps = _extends({}, otherProps) || {};
  _style['width'] = _style['width'] ? _style === null || _style === void 0 ? void 0 : _style['width'] : '70px';
  _otherProps.style = _style;

  // eslint-disable-next-line react-hooks/rules-of-hooks
  //单个Checked的value
  var _useState = useState(''),
    ID = _useState[0],
    setID = _useState[1];
  var _useState2 = useState(false),
    singleChecked = _useState2[0],
    setSingleChecked = _useState2[1];
  var _useState3 = useState(false),
    Indeterminate = _useState3[0],
    setIndeterminate = _useState3[1];
  var _useState4 = useState([]),
    CheckedList = _useState4[0],
    setCheckedList = _useState4[1];
  var _useState5 = useState(false),
    CheckAll = _useState5[0],
    setCheckAll = _useState5[1];
  //联动示例的------------------------------------
  var _useState6 = useState(true),
    checked01 = _useState6[0],
    setChecked01 = _useState6[1];
  var _useState7 = useState(false),
    disabled01 = _useState7[0],
    setDisabled01 = _useState7[1];
  //-------------------------------------------
  var _useState8 = useState({}),
    parentStyles = _useState8[0],
    setParentStyles = _useState8[1];
  var isGroupProps = {},
    defaultProps = {};
  useEffect(function () {
    setID("checkBox_" + uuid());
  }, []);
  useEffect(function () {
    if (ID) {
      //只有不受控值的选中事件采用事件监听
      document.getElementById(ID).addEventListener('click', function (e) {
        if (isGroupProps.defaultValue) {
          //多选框组
          checkedChange();
        } else if (defaultProps.hasOwnProperty('defaultChecked')) {
          //单选框
          checkedChange();
        }
        function checkedChange() {
          if (e.target.checked) {
            console.log('ChangeCheckedStyle');
            ChangeCheckedStyle();
          } else {
            setTimeout(function () {
              //清除 选中的多选按钮边框色、背景色(选中前)

              var elems = document.getElementById(ID).querySelectorAll('.ant-checkbox');
              var index = 0,
                length = elems.length;
              for (; index < length; index++) {
                if (elems[index].className == 'ant-checkbox') {
                  elems[index].childNodes[1].style.backgroundColor = checkgroundColor || '';
                }
              }
            }, 0);
          }
        }
      });

      //更改cheked样式
      ChangeCheckStyle();
      ChangeCheckedStyle();
      ChangeTextStyle();
      ChangeSpanWidth();
    }
  }, [ID, checked, defaultChecked, value, isGroup]);
  useEffect(function () {
    if (CheckSpanWidth) {
      ChangeSpanWidth();
    }
    if (CheckStyleHeight || CheckStyleWidth || checkBorderColor || checkgroundColor) {
      ChangeCheckStyle();
    }
    if (checkedgroundColor) {
      ChangeCheckedStyle();
    }
  }, [CheckSpanWidth, CheckStyleHeight, CheckStyleWidth, checkBorderColor, checkgroundColor, checkedgroundColor]);
  useEffect(function () {
    ChangeTextStyle();
  }, [_otherProps.style]);
  var ChangeSpanWidth = function ChangeSpanWidth() {
    var _ref2;
    var elems = (_ref2 = document.getElementById(ID) || document) === null || _ref2 === void 0 ? void 0 : _ref2.querySelectorAll('.ant-checkbox+span');
    var index = 0;
    var length = elems.length;
    for (; index < length; index++) {
      elems[index].style.paddingLeft = (CheckSpanWidth || "") + 'px'; //间距
    }
  };

  var ChangeTextStyle = function ChangeTextStyle() {
    //console.log(_otherProps.style, '----变更');
    setTimeout(function () {
      var _ref3;
      var _otherProps$style = _otherProps.style,
        color = _otherProps$style.color,
        fontSize = _otherProps$style.fontSize,
        fontWeight = _otherProps$style.fontWeight,
        height = _otherProps$style.height,
        opacity = _otherProps$style.opacity,
        textAlign = _otherProps$style.textAlign,
        parentStyles = _objectWithoutPropertiesLoose(_otherProps$style, _excluded2);
      //console.log(_otherProps.style);
      //选中多选按钮后，在右侧属性面板”样式”选项卡中设置组件的字号和字体颜色
      var elems = (_ref3 = document.getElementById(ID) || document) === null || _ref3 === void 0 ? void 0 : _ref3.querySelectorAll('.ant-checkbox-wrapper');
      var index = 0,
        length = elems.length;
      for (; index < length; index++) {
        elems[index].style.fontSize = fontSize || "";
        elems[index].style.color = color || "";
        elems[index].style.fontWeight = fontWeight || "";
        elems[index].style.lineHeight = height || "";
        elems[index].style.opacity = opacity || "";
        elems[index].style.textAlign = textAlign || "";
      }
    }, 0);
  };
  var ChangeCheckStyle = function ChangeCheckStyle() {
    //多选按钮边框色、背景色(选中前)
    setTimeout(function () {
      var _ref4;
      var elems = (_ref4 = document.getElementById(ID) || document) === null || _ref4 === void 0 ? void 0 : _ref4.querySelectorAll('.ant-checkbox-inner');
      var index = 0,
        length = elems.length;
      for (; index < length; index++) {
        elems[index].style.borderColor = checkBorderColor || ""; //checke的边框颜色
        elems[index].style.backgroundColor = checkgroundColor || ""; //多选框背景色

        //按钮大小支持在右侧属性面板”属性”选项卡中设置。
        if (CheckStyleHeight || CheckStyleWidth) {
          elems[index].style.height = (CheckStyleHeight || "") + 'px'; //多选框高度
          elems[index].style.width = (CheckStyleWidth || "") + 'px'; //多选框宽度
        }
      }
    }, 0);
  };
  var ChangeCheckedStyle = function ChangeCheckedStyle() {
    setTimeout(function () {
      var _ref5;
      //多选按钮边框色、背景色(选中后)
      var elems = (_ref5 = document.getElementById(ID) || document) === null || _ref5 === void 0 ? void 0 : _ref5.querySelectorAll('.ant-checkbox-checked .ant-checkbox-inner');
      var index = 0,
        length = elems.length;
      console.log(checkedgroundColor, '---checkedgroundColor');
      for (; index < length; index++) {
        //  elems[index].style.borderColor = 'red'; //checked的边框颜色
        elems[index].style.backgroundColor = checkedgroundColor || ""; //多选框背景色
      }
    }, 0);
  };

  //修复删除默认字段会转成对象的问题
  function ChangeArray(data) {
    var newValue = [];
    if (Array.isArray(data)) {
      data.map(function (item) {
        if (typeof item === 'object') {
          var str = Object.values(item).join('');
          newValue.push(str);
        } else {
          newValue.push(item);
        }
      });
      return newValue;
    } else {
      return data;
    }
  }
  var defaultComponent = function defaultComponent() {
    //单选复选框属性
    defaultProps = {
      style: style,
      ref: ref,
      // defaultChecked,
      disabled: disabled,
      autoFocus: autoFocus,
      // checked: singleChecked, //受控是否选中
      indeterminate: indeterminate
      // onChange: onChange(),
    };

    !checked ? defaultProps.defaultChecked = defaultChecked : defaultProps.checked = checked;

    // function onChangeSelf(e) {

    //   setSingleChecked(e.target.checked);
    // }
    console.log(defaultProps, '------单选defaultProps');
    return /*#__PURE__*/React.createElement(_Checkbox, _extends({}, defaultProps, {
      onChange: onChange
    }), children);
  };
  var onChange = function onChange(value) {
    var newValue;
    console.log(value, '---------value');
    if (Array.isArray(value)) {
      //数组转成字符串
      newValue = value + "";
    } else {
      //展示是bool
      newValue = value.target.checked;
    }
    console.log(newValue);
    return onNewChange && onNewChange(newValue);
  };
  //多选框
  var isGroupComponent = function isGroupComponent() {
    isGroupProps = {
      disabled: disabled,
      onChange: onChange
    };

    //如果是字符串类型则转成数组
    if (typeof value == 'string') {
      if (value.includes(',' || '，')) {
        //有逗号的情况
        value = value.split(',' || '，');
      } else if (!value) {
        //值为空的情况
        value = [];
      } else {
        //有值的情况
        value = [value];
      }
    } else if (Array.isArray(value)) {
      value = ChangeArray(value);
    } else {
      //其他错误参数类型都为
      value = '';
    }
    if (typeof defaultCheckedChecked == 'string') {
      if (defaultCheckedChecked.includes(',' || '，')) {
        //有逗号的情况
        defaultCheckedChecked = defaultCheckedChecked.split(',' || '，');
      } else if (!defaultCheckedChecked) {
        //值为空的情况
        defaultCheckedChecked = [];
      } else {
        //有值的情况
        defaultCheckedChecked = [defaultCheckedChecked];
      }
      defaultCheckedChecked = defaultCheckedChecked.split(',' || '，');
    } else if (Array.isArray(defaultCheckedChecked)) {
      defaultCheckedChecked = ChangeArray(defaultCheckedChecked);
    } else {
      //其他错误参数类型都为
      defaultCheckedChecked = '';
    }
    if (Array.isArray(value) && value[0] !== '') {
      var _value, _value2;
      if (((_value = value) === null || _value === void 0 ? void 0 : _value.length) == 0) {
        isGroupProps.value = [];
      }
      ((_value2 = value) === null || _value2 === void 0 ? void 0 : _value2.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 {
          console.log(isGroupProps, '------isGroupProps121');
          isGroupProps01 = _extends({}, isGroupProps);
        }
        console.log(isGroupProps01, '----isGroupProps01');
        //console.log(_otherProps,'--_otherProps')
        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", null, 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) {
      console.log(list, '---------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前');
      if (isGroupProps.value && isGroupProps.defaultValue) {
        isGroupProps.value.length == 0 && isGroupProps.defaultValue.length > 0 ? delete isGroupProps.value : delete isGroupProps.defaultValue;
      }
      // console.log(isGroupProps, '-----------isGroupProps');
      return /*#__PURE__*/React.createElement("div", null, isControlAll ? /*#__PURE__*/React.createElement("div", null, commandCom(), /*#__PURE__*/React.createElement(_Checkbox.Group, _extends({}, isGroupProps, {
        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')));
  };
  function autoSize(value1, value2) {
    var Value = value1;
    Value = "calc(" + (value1 || '200px') + " + " + (value2 || '0px') + ")";
    console.log(Value);
    return Value;
  }
  var layoutStyle = _extends({}, style, {
    width: autoSize(_otherProps.style.width, _otherProps.style.paddingLeft) || '100px',
    display: _otherProps.style.display || displayStyle ? 'none' : 'inline-block' || '',
    alignItems: _otherProps.style.alignItems || '',
    flexDirection: _otherProps.style.flexDirection,
    flexWrap: _otherProps.style.flexWrap,
    justifyContent: _otherProps.style.justifyContent,
    marginBottom: _otherProps.style.marginBottom,
    marginRight: _otherProps.style.marginRight,
    marginTop: _otherProps.style.marginTop,
    marginLeft: _otherProps.style.marginLeft,
    paddingTop: _otherProps.style.paddingTop,
    paddingBottom: _otherProps.style.paddingBottom,
    paddingLeft: _otherProps.style.paddingLeft,
    paddingRight: _otherProps.style.paddingRight
  });
  return /*#__PURE__*/React.createElement("div", {
    id: ID,
    className: 'CheckBox',
    style: layoutStyle
  }, isLinkGroup ? Example() : isGroup ? isGroupComponent() : defaultComponent());
};
antCheckbox.displayName = 'antCheckbox';
export default antCheckbox;
export function uuid() {
  return (Math.random() * 1e6 >> 0).toString(36);
}