import React, { useState, useEffect, useRef } from 'react';
import { Checkbox } from 'antd';
import styles from './PushTest.less';
const CheckboxGroup = Checkbox.Group;

const CardCheck = props => {
  // 自定义获取改变后的值hooks
  const usePrevious = value => {
    const ref = useRef();
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
  };
  const { cardMsg, callback, checkList } = props;
  const [checkedList, setCheckedList] = useState([]); // 选中列表
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);
  const [plainOptions, setPlainOptions] = useState([]);
  const prevAmount = usePrevious({ checkedList });

  useEffect(() => {
    setPlainOptions(cardMsg.plainOptions);
    setCheckedList(cardMsg.checkedList);
    setIndeterminate(cardMsg.indeterminate);
    setCheckAll(cardMsg.checkAll);
  }, []);
  useEffect(() => {
    if (prevAmount) {
      let newCheckList = [...checkList];
      console.log(newCheckList);
      // 当前选中的
      let currentArr = checkedList;
      // 上一次选中的
      let preArr = prevAmount.checkedList;
      currentArr = new Set(currentArr);
      preArr = new Set(preArr);
      // 找出相同的部分
      let someArr = [...new Set([...currentArr].filter(x => preArr.has(x)))];
      // 复选框事选中还是取消选中 add or del
      let checkType;
      if ([...currentArr].length > [...preArr].length) {
        checkType = 'add';
      } else if ([...currentArr].length < [...preArr].length) {
        checkType = 'del';
      }
      if (checkType === 'add') {
        // 添加新选中的元素
        currentArr.forEach(item => {
          if (someArr.indexOf(item) === -1) {
            let checkName = plainOptions.find(ele => ele.value === item);
            newCheckList.push(checkName);
          }
        });
      } else if (checkType === 'del') {
        // 删除取消勾选的元素
        preArr.forEach(item => {
          if (someArr.indexOf(item) === -1) {
            newCheckList.splice(
              newCheckList.findIndex(ele => ele.value === item),
              1,
            );
          }
        });
      }
      callback(checkedList, newCheckList);
    }
  }, [checkedList]);
  // 单选监听
  const onChange = list => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };
  // 全选监听
  const onCheckAllChange = e => {
    setCheckedList(
      e.target.checked ? plainOptions.map(item => item.value) : [],
    );
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };
  return (
    <div className={styles.checkContent}>
      <div className={styles.topCheckbox}>
        <Checkbox
          indeterminate={indeterminate}
          onChange={e => onCheckAllChange(e)}
          checked={checkAll}
        >
          {cardMsg.groupName}
        </Checkbox>
      </div>
      <div className={styles.bottomCheckbox}>
        <CheckboxGroup
          value={checkedList}
          onChange={list => onChange(list)}
          style={{ display: 'flex', flexWrap: 'wrap' }}
        >
          {plainOptions.map(item => (
            <Checkbox key={item.value} value={item.value}>
              {item.label}
            </Checkbox>
          ))}
        </CheckboxGroup>
      </div>
    </div>
  );
};

export default CardCheck;
