import { FormItem, Radio } from '@formily/antd-v5';
import { Field } from '@formily/react';
import cx from 'classnames';
import './index.less';
import { FieldProps } from '../../typings';

/**
 * An interface that defines an option in the RadioButton component.
 */
interface Option {
  value: string | number;
  label: string;
  disabled?: boolean;
}

/**
 * An interface that defines the properties of the RadioButton component.
 */
export interface RadioButtonProps extends FieldProps {
  options: Option[];
}

/**
 * The RadioButton component.
 *
 * This is a wrapper around the Radio.Group component with optionType set to 'button'
 * which makes it easier to use in a Formily form.
 */
const RadioButton: React.FC<RadioButtonProps> = (props) => {
  const { name, title, options = [], validator = [], decoratorProps, componentProps } = props;

  return (
    <div className={cx('global_radio_button')}>
      <Field
        {...props}
        name={name}
        title={title}
        dataSource={options}
        decorator={[
          FormItem,
          {
            ...decoratorProps,
          },
        ]}
        component={[
          Radio.Group,
          {
            optionType: 'button',
            ...componentProps,
            componenttypename: 'Radio.Group',
          },
        ]}
        validator={validator}
      />
    </div>
  );
};

export default RadioButton;