import React, { ReactElement } from 'react';
import css from '../../utils/css';

import { SelectButtonGroupWrapper } from './StyledSelectButton';
import SelectButton from './SelectButton';

import { CommonProps } from '../common';
import { useDeprecation } from '../../utils/hooks';

export interface SelectButtonGroupProps extends CommonProps {
  /**
   * Name of the select button group.
   */
  name: string;
  /**
   * Change event handler receiving selected value.
   */
  onChange: (value: string | number) => void;
  /**
   * An array of button options to be selected.
   */
  options: {
    disabled?: boolean;
    text: string;
    value: string | number;
  }[];
  /**
   * The size of the select button.
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * Value currently selected.
   */
  value?: string | number;
}

const SelectButtonGroup = ({
  name,
  value,
  options,
  onChange,
  size = 'medium',
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: SelectButtonGroupProps): ReactElement => {
  useDeprecation(
    'SelectButton.Group is deprecated. Please use Radio.ButtonGroup with the same functionalities.'
  );

  return (
    <SelectButtonGroupWrapper
      themeSize={size}
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      {options.map(option => (
        <SelectButton
          key={option.value}
          text={option.text}
          value={option.value}
          disabled={option.disabled}
          name={name}
          selected={value === option.value}
          onChange={(e): void => {
            if (e.target.checked) {
              onChange(option.value);
            }
          }}
          size={size}
        />
      ))}
    </SelectButtonGroupWrapper>
  );
};

export default SelectButtonGroup;