import './form-element-form-centric.scss';
import {createElement} from "../../_global/scripts/helpers";
import {createLabelFormCentric} from "../../atoms/labelFormCentric/LabelFormCentricComponent";
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 createFormCentricElement = ({
  wrapperClasses = 'form-element-form-centric',
  name = 'name',
  id = null,
  id2 = null,
  inputType = 'text',
  isRequired = false,
  placeholder = '',
  label = 'Benutzername',
  label2 = 'Benutzername',
  selectOptions = [],
}) => {
  const wrapper = createElement('div', wrapperClasses.split(' '));
  if (!id || id.length === 0) {
    id = name;
  }

  if (inputType === 'text') {
    const textInput = createElement('div', ['mwf-textinput'], null, wrapper);

    textInput.appendChild(createInputText({
      placeholder: placeholder,
      isRequired: isRequired,
      name: name,
      id: id,
      type: inputType,
      classes: 'mwf-textinput__input'
    }));
    textInput.appendChild(createLabelFormCentric({
      forAttribute: id,
      isRequired: isRequired,
      text: label,
      labelType: 'text',
    }));
    const hint = createElement('div', ['mwf-textinput__hint'], null, textInput);
    createElement('p', [], 'Bitte tragen Sie hier ihren Vornamen ein.', hint);
    createElement('div', ['mwf-textinput__error'], 'Dieses Feld darf nicht leer sein.', textInput);
  }

  if (inputType === 'checkbox') {
    const checkboxFieldset = createElement('fieldset', ['mwf-checkboxgroup'], null, wrapper);
    createElement('legend', ['mwf-checkboxgroup__legend'], 'Legend Header', checkboxFieldset);
    createElement('div', ['mwf-checkboxgroup__error'], 'Dieses Feld darf nicht leer sein.', checkboxFieldset);
    const checkboxGroup = createElement('div', ['mwf-checkboxgroup__options'], null, checkboxFieldset);
    const checkbox = createElement('div', ['mwf-checkbox'], null, checkboxGroup);
    checkbox.appendChild(createInputCheckboxRadio({
      type: inputType,
      isRequired: isRequired,
      name: name,
      id: id,
      classes: 'mwf-checkbox__input'
    }));
    checkbox.appendChild(createLabelFormCentric({
      forAttribute: id,
      isRequired: isRequired,
      text: label,
      labelType: 'checkbox',
    }));
  }

  if (inputType === 'radio') {
    const checkboxFieldset = createElement('fieldset', ['mwf-radiogroup'], null, wrapper);
    createElement('legend', ['mwf-radiogroup__legend'], 'Legend Header', checkboxFieldset);
    createElement('div', ['mwf-radiogroup__error'], 'Dieses Feld darf nicht leer sein.', checkboxFieldset);
    const checkboxGroup = createElement('div', ['mwf-radiogroup__options'], null, checkboxFieldset);
    const checkbox = createElement('div', ['mwf-radio'], null, checkboxGroup);
    checkbox.appendChild(createInputCheckboxRadio({
      type: inputType,
      isRequired: isRequired,
      name: name,
      id: id,
      classes: 'mwf-radio__input'
    }));
    checkbox.appendChild(createLabelFormCentric({
      forAttribute: id,
      isRequired: isRequired,
      text: label,
      labelType: 'radio',
    }));
    const checkbox2 = createElement('div', ['mwf-radio'], null, checkboxGroup);
    checkbox2.appendChild(createInputCheckboxRadio({
      type: inputType,
      isRequired: isRequired,
      name: name,
      id: id2,
      classes: 'mwf-radio__input'
    }));
    checkbox2.appendChild(createLabelFormCentric({
      forAttribute: id2,
      isRequired: isRequired,
      text: label2,
      labelType: 'radio',
    }));
  }

  if (inputType === 'select') {
    const selectDiv = createElement('div', ['mwf-select'], null, wrapper);
    selectDiv.appendChild(createInputSelect({
      placeholder: placeholder,
      isRequired: isRequired,
      name: name,
      id: id,
      classes: 'mwf-select__select',
      options: selectOptions.length > 0 ? selectOptions : InputSelectData,
    }));
    selectDiv.appendChild(createLabelFormCentric({
      forAttribute: id,
      isRequired: isRequired,
      text: label,
      labelType: 'select',
    }));
    createElement('div', ['mwf-select__error'], 'Dieses Feld darf nicht leer sein.', selectDiv);
  }

  if (inputType === 'textarea') {
    const textArea = createElement('div', ['mwf-textarea'], null, wrapper);

    textArea.appendChild(createInputText({
      placeholder: placeholder,
      isRequired: isRequired,
      name: name,
      id: id,
      type: inputType,
      classes: 'mwf-textarea__input'
    }));
    textArea.appendChild(createLabelFormCentric({
      forAttribute: id,
      isRequired: isRequired,
      text: label,
      labelType: 'text',
    }));
    const hint = createElement('div', ['mwf-textarea__hint'], null, textArea);
    createElement('p', [], 'Hier können Sie uns einen Kommentar hinterlassen (max. 1500 Zeichen).', hint);
    createElement('div', ['mwf-textarea__error'], 'Dieses Feld darf nicht leer sein.', textArea);
  }

  if (inputType === 'checkboxGroup') {
    const checkboxGroupLegend = createElement('legend', ['mwf-checkboxgroup__legend'], 'Legend Header', wrapper);
    if (isRequired) {
      const asterix = createElement('span', ['mwf-checkboxgroup__required','mwf-required'], '*', checkboxGroupLegend);
      asterix.title = 'Pflichtfeld';
    }
    createElement('div', ['mwf-checkboxgroup__error'], 'Dieses Feld darf nicht leer sein.', wrapper);

    const checkboxGroupOptions = createElement('div', ['mwf-checkboxgroup__options'], null, wrapper);
    const checkboxBox = createElement('div', ['mwf-checkbox'], null, checkboxGroupOptions);
    checkboxBox.appendChild(createInputCheckboxRadio({
      type: 'checkbox',
      name: name,
      id: id,
      classes: 'mwf-checkbox__input'
    }));
    checkboxBox.appendChild(createLabelFormCentric({
      forAttribute: id,
      text: label,
      labelType: 'checkbox',
    }));
  }

  if (inputType === 'file') {
    const fileInput = createElement('div', ['mwf-file'], null, wrapper);
    const fileLegend = createElement('div', ['mwf-file__legend'], null, fileInput);
    createElement('p', ['mwf-file__label'], 'Upload', fileLegend);
    createElement('div', ['mwf-file__error'], 'Dieses Feld darf nicht leer sein.', fileLegend);

    const fileUploaded = createElement('div', ['mwf-file__uploaded'], null, fileInput);
    const fileUploadedUl = createElement('ul', ['mwf-file__ul'], null, fileUploaded);
    const fileUploadedRow = createElement('div', ['mwf-upload-row'], null, fileUploadedUl);
    const fileUploadedInfo = createElement('div', ['mwf-upload-fileinfo'], null, fileUploadedRow);
    createElement('div', ['mwf-upload-preview'], null, fileUploadedInfo);
    const fileUploadedMeta = createElement('div', ['mwf-upload-metadata'], null, fileUploadedInfo);
    const fileUploadedMetaUl = createElement('ul', [], null, fileUploadedMeta);
    createElement('li', [], 'Name: data.pdf', fileUploadedMetaUl);
    createElement('li', [], 'Size: 92.73 KB', fileUploadedMetaUl);

    const fileUploadedActions = createElement('div', ['mwf-upload-actions'], null, fileUploadedRow);
    createElement('button', ['mwf-upload-delete'], 'Delete', fileUploadedActions);
    createElement('button', ['mwf-upload-upload'], 'Upload', fileUploadedActions);

    const fileUploadedDropzone = createElement('div', ['mwf-file__dropzone'], null, fileInput);
    const fileUploadedLabel = fileUploadedDropzone.appendChild(createLabelFormCentric({
      forAttribute: id,
      text: label,
      classes: 'mwf-file__button',
      labelType: 'text',
    }));
    const input = createElement('input', [], null, fileUploadedLabel);
    input.type = 'file';
    input.id = id;
    input.name = name;
    input.classes = ['mwf-file__input'];
    input.setAttribute("aria-hidden", "true");
  }

  return wrapper;
}