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

import {
  StyledSelectButton,
  StyledInput,
  StyledInputText,
} from './StyledSelectButton';

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

export interface SelectButtonProps extends Omit<CommonProps, 'id'> {
  /**
   * Specify whether the option is disabled.
   */
  disabled?: boolean;
  /**
   * Id of <input> element.
   */
  id?: string;
  /**
   * Name of <input> element, is used to refer to the form data for submission.
   */
  name?: string;
  /**
   * Change event handler. Use `event.target.checked` to see whether the button will be changed to checked.
   */
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
  /**
   * Whether the button is being chosen.
   */
  selected?: boolean;
  /**
   * The size of the select button.
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * Label of the select button.
   */
  text: string | ReactElement;
  /**
   * Value of the select button option.
   */
  value: string | number;
}

const SelectButton = ({
  text,
  value,
  selected,
  disabled,
  onChange,
  size = 'medium',
  name,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: SelectButtonProps): ReactElement => {
  useDeprecation(
    'SelectButton is deprecated. Please use Radio.Button with the same functionalities.'
  );

  return (
    <StyledSelectButton
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      <StyledInput
        type="radio"
        checked={selected}
        value={value}
        name={name}
        disabled={disabled}
        onChange={onChange}
        id={id}
      />
      <StyledInputText themeSize={size}>{text}</StyledInputText>
    </StyledSelectButton>
  );
};

export default SelectButton;