import React, { useEffect } from 'react';
import './RadioButtonGroup.scss';

interface Props {
  form?: any;
  state?: any;
  labels?: any;
  name?: string;
  key_?: number;
  setState?: any;
  values?: string[];
  className?: string;
  defaultValue?: string;
  inputToInitialize?: any;
  setInputToInitialize?: any;
}

export const RadioButtonGroup: React.FC<Props> = ({
  key_,
  name,
  form,
  values = [],
  setState,
  className = '',
  inputToInitialize,
  defaultValue = values[0],
  setInputToInitialize,
  state = {},
  labels = {},
}) => {
  const newState: any = Object.assign({}, state);
  const selection: any = state.value;

  useEffect(() => {
    if (inputToInitialize === key_) {
      newState.name = name;
      newState.value = defaultValue;
      setState(newState);
      setInputToInitialize(key_ + 1);
    }
  }, [inputToInitialize]);

  const onChange = (event: any): void => {
    const newState = Object.assign({}, state);
    newState.value = event.target.value;
    setState(newState);
  };

  return (
    <div className={className}>
      {values.map((value: string) => {
        const label = labels[value] ? (
          <span className="mo-display-input__radio-button-label-content">
            {labels[value]}
          </span>
        ) : (
          value
        );

        return (
          <div className="mo-display-input__radio-button" key={value}>
            <input
              form={form}
              name={name}
              value={value}
              id={value}
              onChange={onChange}
              type="radio"
              checked={value === selection}
            />
            <label htmlFor={value}>
              <span className="mo-display-input__radio-button-dot-background" />
              <span className="mo-display-input__radio-button-dot-foreground" />
              {label}
            </label>
          </div>
        );
      })}
    </div>
  );
};