import {createElement} from "../../_global/scripts/helpers";
import {createLabel} from "../../atoms/label/LabelComponent";
import {createInputCheckboxRadio} from "../../atoms/input-checkbox-radio/InputCheckboxRadioComponent";
import {createInputText} from "../../atoms/input-text/InputTextComponent";
import {createInputSelect} from "../../atoms/input-select/InputSelectComponent";
import {InputSelectData} from "../../atoms/input-select/InputSelectData";

export const createFormElement = ({
  wrapperClasses = 'form-element',
  name = 'name',
  id = null,
  inputType = 'text',
  isRequired = false,
  placeholder = '',
  label = 'Benutzername',
  selectOptions = [],
}) => {
  const wrapper = createElement('div', wrapperClasses.split(' '));
  if (!id || id.length === 0) {
    id = name;
  }
  if (inputType === 'checkbox' || inputType === 'radio') {
    wrapper.appendChild(createInputCheckboxRadio({
      type: inputType,
      isRequired: isRequired,
      name: name,
      id: id,
    }));
  }
  wrapper.appendChild(createLabel({
    forAttribute: id,
    isRequired: isRequired,
    text: label,
  }));
  if (inputType === 'select') {
    wrapper.appendChild(createInputSelect({
      placeholder: placeholder,
      isRequired: isRequired,
      name: name,
      id: id,
      options: selectOptions.length > 0 ? selectOptions : InputSelectData,
    }));
  }
  if (['checkbox', 'radio', 'select'].indexOf(inputType) === -1) {
    wrapper.appendChild(createInputText({
      placeholder: placeholder,
      isRequired: isRequired,
      name: name,
      id: id,
      type: inputType,

    }));
  }

  return wrapper;
}