import React from 'react';
import {
  FormControl,
  FormControlLabel,
  FormLabel,
  Radio as MuiRadio,
  RadioGroup as MuiRadioGroup,
} from '@mui/material';

import { styled } from '@mui/material/styles';
import { RadioBaseProps } from '../interfaces/RadioGroup';
import { TextFieldSizeVariant } from '../types';

const RadioStyled = styled(MuiRadio)({});
const sizes: TextFieldSizeVariant[] = ['small', 'medium'];

export const RadioGroup = ({ ...props }: RadioBaseProps) => {
  const { onChange } = props;

  return (
    <FormControl disabled={props.disabled}>
      <FormLabel id={props.id}>{props.label}</FormLabel>
      <MuiRadioGroup
        aria-labelledby={props.id}
        defaultValue={props.checked}
        name="radio-buttons-group"
        row={props.direction === 'horizontal' ? true : false}
        onChange={!!onChange ? (event, value) => onChange(event, value) : undefined}
      >
        {props.options &&
          props.options.map((item, key) => (
            <FormControlLabel
              value={item.value}
              control={<RadioStyled color={props.color} size={item.size ? item.size : sizes[1]} />}
              label={item.label}
              key={key}
              sx={{alignItems: "center"}}
            />
          ))}
      </MuiRadioGroup>
    </FormControl>
  );
};