big-agi/src/common/components/forms/FormRadioControl.tsx

import * as React from 'react';

import { FormControl, Radio, RadioGroup } from '@mui/joy';

import type { Immutable } from '~/common/types/immutable.types';

import { FormLabelStart } from './FormLabelStart';


export type FormRadioOption<T extends string> = {
  value: T,
  label: string | React.JSX.Element,
  description?: string,
  disabled?: boolean
};


export const FormRadioControl = <TValue extends string>(props: {
  title: string | React.JSX.Element,
  description?: string | React.JSX.Element,
  tooltip?: string | React.JSX.Element,
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  options: Immutable<FormRadioOption<TValue>[]>;
  value?: TValue;
  onChange: (value: TValue) => void;
}) => {
  const selectedOption = props.options.find(option => option.value === props.value);
  const description = selectedOption?.description ?? props.description;

  return (
    <FormControl size={props.size} orientation='horizontal' disabled={props.disabled} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
      {(!!props.title || !!description) && <FormLabelStart title={props.title} description={description} tooltip={props.tooltip} />}
      <RadioGroup
        size={props.size}
        orientation='horizontal'
        value={props.value}
        onChange={(event: React.ChangeEvent<HTMLInputElement>) => event.target.value && props.onChange(event.target.value as TValue)}
        sx={{ flexWrap: 'wrap', gap: 1 }}
      >
        {props.options.map((option) =>
          <Radio key={'opt-' + option.value} value={option.value} label={option.label} disabled={option.disabled || props.disabled} />,
        )}
      </RadioGroup>
    </FormControl>
  );
};