import React, { useCallback, useMemo } from 'react';
// import IconFont from '../../themeComponents/IconFont';
import { Row, Col, Checkbox, Tooltip } from 'antd';
import FormCollapsedLayout from '../FormCollapsedLayout';
import './index.less';

const CheckGroup = Checkbox.Group;

// showMore 显示更多 收起时只展示3行
const CheckboxGroup = ({ className = '', icon, maxLength = 9, title, sourceData = [], onCheckAllCb, renderExtraTip, showCheckAll = false, titleExt, value, onChange }) => {
  const checkAllChange = useCallback(
    (e) => {
      const checkAll = sourceData.map((v) => v.value);
      const checkValue = e.target.checked ? checkAll : [];
      onChange && onChange(checkValue);
      onCheckAllCb && onCheckAllCb(checkValue);
    },
    [onChange, onCheckAllCb, sourceData]
  );
  return (
    <FormCollapsedLayout
      className={`lm-filter-checkbox-group-wrapper ${className}`}
      visibleCollapsed={sourceData.length > maxLength}
      title={title}
      icon={icon}
      titleExt={
        showCheckAll ? (
          <Checkbox indeterminate={value && value.length && value.length < sourceData.length} checked={value && value.length && value.length === sourceData.length} onChange={checkAllChange}>
            全选
          </Checkbox>
        ) : (
          titleExt
        )
      }
    >
      <FromCheckboxGroup renderExtraTip={renderExtraTip} value={value} onChange={onChange} sourceData={sourceData} maxLength={maxLength} />
    </FormCollapsedLayout>
  );
};

function FromCheckboxGroup({ renderExtraTip, value, onChange, isCollapsed, sourceData, maxLength }) {
  return (
    <CheckGroup value={value} onChange={onChange}>
      <Row gutter={8} className="checkbox-row">
        {sourceData.map((v, i) => {
          return (
            <Col key={v.value} style={i > maxLength - 1 && isCollapsed ? { display: 'none' } : {}}>
              <Tooltip title={v.label}>
                <Checkbox value={v.value} disabled={!!v.disabled}>
                  {renderExtraTip && renderExtraTip(v)}
                  {/* {v.icon && <IconFont type={v.icon} />} */}
                  <span>{v.label}</span>
                </Checkbox>
              </Tooltip>
            </Col>
          );
        })}
      </Row>
    </CheckGroup>
  );
}

export default CheckboxGroup;
