import React, { useMemo } from 'react';
import Wrap from '../wrap/Wrap';
import { Checkbox } from 'antd';
import { returnClass } from '../unit';

import '../g.scss';

function CheckboxGroup(props: IRadioGroup) {
  const {
    title,
    selectList = [],
    change,
    value,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    paddingSize,
    padding
  } = props;

  const CheckboxGroup = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        {title ? (
          <div
            className={returnClass(paddingSize ? paddingSize : 'normal')}
            style={{ marginRight: paddingSize ? paddingSize : padding }}
          >
            {title}
          </div>
        ) : (
          <></>
        )}
        <div className="zl-large-screen-radio-wrap">
          <Checkbox.Group
            options={selectList}
            onChange={(checkedValues) => change?.(checkedValues)}
            value={value}
          />
        </div>
      </Wrap>
    );
  }, [title, value]);

  return CheckboxGroup;
}

export default CheckboxGroup;

export interface IRadioGroup {
  title: string;
  selectList: ISelectList[];
  wrapStyle?: React.CSSProperties;
  change?: Function;
  value?: string;
  paddingSize?: string;
  padding: number;
}

export interface ISelectList {
  key: number | string;
  name: string | number;
  type: string;
  names?: string;
}