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

const RadioGroup = Radio.Group;

// showMore 显示更多 收起时只展示3行
const RadioGroupFilter = ({ className = '', icon, title, sourceData = [], renderExtraTip, maxLength = 9, titleExt, value, onChange }) => {
  return (
    <FormCollapsedLayout className={`lm-filter-radio-group-wrapper ${className}`} visibleCollapsed={sourceData.length > maxLength} title={title} icon={icon} titleExt={titleExt}>
      <FromRadioGroupFilter renderExtraTip={renderExtraTip} value={value} onChange={onChange} sourceData={sourceData} maxLength={maxLength} />
    </FormCollapsedLayout>
  );
};

function FromRadioGroupFilter({ renderExtraTip, value, onChange, isCollapsed, sourceData, maxLength }) {
  return (
    <RadioGroup value={value} onChange={(e) => onChange(e.target.value)}>
      <Row gutter={8} className={`radio-row ${isCollapsed ? 'collapsed' : ''}`}>
        {sourceData.map((v, i) => {
          return (
            <Col key={v.value} style={i > maxLength - 1 && isCollapsed ? { display: 'none' } : {}}>
              <Tooltip title={v.label}>
                <Radio value={v.value} disabled={!!v.disabled}>
                  {renderExtraTip && renderExtraTip(v)}
                  {/* {v.icon && <IconFont type={v.icon} />} */}
                  <span>{v.label}</span>
                </Radio>
              </Tooltip>
            </Col>
          );
        })}
      </Row>
    </RadioGroup>
  );
}

export default RadioGroupFilter;
