import React, { useState, useEffect } from 'react';
import { Checkbox } from 'antd';
import classnames from 'classnames';
import styles from './itemCard.less';
import { checkChildrenByCondition, checkIsGroup, getId } from '.';

const ListCardItem = props => {
  const {
    searchWord,
    item,
    valueList,
    updateValueList,
    ouid,
    changedItem,
  } = props;

  // id
  const id = getId(item);
  // 是否是地图组件
  const isMapWedgt = item.type === 'widgetUIPage';

  // 当前组件是否是分组id
  const isGroup = checkIsGroup(item);
  const [indeterminate, setIndeterminate] = useState(!isGroup);
  const [childrenKeys, setChildrenKeys] = useState([]);
  useEffect(() => {
    if (isGroup) {
      const keys = item.children
        .map(child =>
          checkChildrenByCondition(child, c => getId(c), true, 'map'),
        )
        .flat(Infinity);
      setChildrenKeys(keys);
    } else {
      //
    }
  }, [item]);

  useEffect(() => {
    // 子节点勾选状态变化时
    if (
      isGroup &&
      changedItem.item !== item &&
      !checkIsGroup(changedItem.item) &&
      childrenKeys.includes(getId(changedItem.item))
    ) {
      if (changedItem.value && childrenKeys.every(c => valueList.includes(c))) {
        // 全选
        updateValueList([id], [id]);
        setIndeterminate(false);
      } else if (childrenKeys.some(c => valueList.includes(c))) {
        // 半选
        // eslint-disable-next-line no-unused-expressions
        valueList.includes(id) && updateValueList([], [id]);
        setIndeterminate(true);
      } else {
        // 零选
        // eslint-disable-next-line no-unused-expressions
        valueList.includes(id) && updateValueList([], [id]);
        setIndeterminate(false);
      }
    }
  }, [changedItem.item, changedItem.value]);

  // 勾选事件处理
  const handleChecked = e => {
    const { checked: v } = e.target;
    if (isGroup) {
      const result = [...childrenKeys, id];
      updateValueList(v ? result : [], result, { item, value: v });
      setIndeterminate(false);
    } else {
      updateValueList(v ? [id] : [], [id], { item, value: v });
    }
  };

  const renderChild = () =>
    item.children &&
    item.children.map((c, i) => (
      <ListCardItem
        item={c}
        key={`item${i}key`}
        updateValueList={updateValueList}
        valueList={valueList}
        ouid={ouid}
        changedItem={changedItem}
        searchWord={searchWord}
      />
    ));

  return (
    <>
      <div
        className={classnames({
          [styles.divBox]: isGroup,
          [styles.divSingle]: !isGroup,
        })}
      >
        <div className={styles.topCheckbox}>
          <Checkbox
            indeterminate={isGroup ? indeterminate : false}
            checked={valueList.includes(id)}
            onChange={handleChecked}
          >
            {isMapWedgt ? (
              <div
                style={{ display: 'inline-block' }}
                ref={r => {
                  if (r) r.innerHTML = item.text;
                }}
              />
            ) : (
              <span
                className={classnames({
                  [styles.boldLabel]: isGroup,
                  [styles.isSearch]:
                    searchWord && item.text.includes(searchWord),
                })}
              >
                {item.text}
              </span>
            )}
          </Checkbox>
        </div>
        <div style={{ width: '100%' }} className={styles.checkdiv}>
          {renderChild()}
        </div>
      </div>
    </>
  );
};

export default ListCardItem;
