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

import '../g.scss';

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

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

  return Redio;
}

export default RadioGroup;

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

}

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