import React, { FC, ReactNode } from 'react';
import classNames from 'classnames';

import css from './index.module.css';

export interface RadioItem {
  name: string;
  value: string;
  label: ReactNode;
  isChecked?: boolean;
}

export interface RadioButtonsProps {
  items: RadioItem[];
  desc?: string;
  onChange?: (e) => void;
  onBlur?: (e) => void;
  error?: string;
  required?: boolean;

  // style props
  horizontal?: boolean;
  invert?: boolean;
}

const RadioButtons: FC<RadioButtonsProps> = ({
  desc,
  onChange,
  onBlur,
  items,
  error,
  required,
  horizontal,
  invert,
}) => {
  const radioButtonsClassNames = classNames(css.radioButtons, {
    [`${css.radioButtonsError}`]: error,
    [`${css.radioButtonsHorizontal}`]: horizontal,
    [`${css.radioButtonsInvert}`]: invert,
  });

  return (
    <div className={radioButtonsClassNames} data-testid="RadioButtons">
      {desc && <div className={css.radioButtons__desc}>{desc}</div>}
      {items &&
        items.map(item => (
          <label className={css.radioButtons__label} key={item.value}>
            <input
              required={required}
              onBlur={onBlur}
              checked={item.isChecked}
              name={item.name}
              type="radio"
              aria-label={item.value}
              className={css.radioButtons__input}
              value={item.value}
              onChange={onChange}
            />
            <div className={css.radioButtons__radio}></div>

            <span className={css.radioButtons__labelText}>{item.label}</span>
          </label>
        ))}
      {error && <div className={css.radioButtons__error}>{error}</div>}
    </div>
  );
};

export default RadioButtons;