import React from "react";
import { optionchangewrapper } from "../../utils/optionchangewrapper";
import Checkbox from "@material-ui/core/Checkbox";
import Radio from "@material-ui/core/Radio";
import "../../assets/checkboxAndRadioStyle.css";

class CheckboxAndRadioWrapper extends React.Component {
  optionChange = (option, optionName, type) => {
    const optionTypePicker = {
      radio: option.target.value,
      checkbox: option.target.checked ? option.target.value : false
    };
    const { onOptionChanged } = this.props;
    onOptionChanged({
      optionName,
      optionValue: optionTypePicker[type]
    });
  };
  isChecked = (type, value, optionName) => {
    const { options } = this.props;
    return options.hasOwnProperty(optionName) && type === "checkbox"
      ? options[optionName]
      : options[optionName] === String(value);
  };
  renderElements = (elements, componentName) => {
    return elements.map(({ type, value, name, optionName } = {}) => (
      <label key={name + type}>
        {type === "radio" ? (
          <Radio
            className="radio-style"
            name={type === "radio" ? `${componentName}-radio` : ""}
            type={type}
            value={value}
            checked={this.isChecked(type, value, optionName)}
            onChange={option => this.optionChange(option, optionName, type)}
          />
        ) : (
          <Checkbox
            className="checkbox-style"
            type={type}
            value={value}
            checked={this.isChecked(type, value, optionName)}
            onChange={option => this.optionChange(option, optionName, type)}
          />
        )}
        <span className="label-style">{name}</span>
        <br />
      </label>
    ));
  };

  render() {
    const { elements, componentName } = this.props;
    return <div>{this.renderElements(elements, componentName)}</div>;
  }
}
export default optionchangewrapper(CheckboxAndRadioWrapper);