import React, { memo } from 'react';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import type { RadioGroupProps } from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import clsx from 'clsx';

import createClasses from './styles';

export interface RadioButtonsProps {
  /**
   * Items array that will be displayed as the radio options.
   */
  items: {
    /**
     * Should be unique text
     */
    text: string;
    selected: boolean;
  }[];
  /**
   * The value is the text passed to the radio buttons.
   */
  clickHandler: RadioGroupProps['onChange'];
}

const RadioButtons = (props: RadioButtonsProps) => {
  const { items, clickHandler } = props;

  const classes = createClasses();

  return (
    <RadioGroup onChange={clickHandler} className={classes.container}>
      {items.map(item => {
        const { selected, text } = item;
        return (
          <FormControlLabel
            data-testid={text}
            key={text}
            className={clsx(classes.button, selected && classes.selectedButton)}
            label={text}
            control={
              <Radio
                className={classes.radio}
                value={text}
                icon={<span />}
                checkedIcon={<span />}
              />
            }
          />
        );
      })}
    </RadioGroup>
  );
};

const m = memo(RadioButtons);
export { m as RadioButtons };