import './election-form.scss';
import {createElement} from "../../_global/scripts/helpers";
import {createInputText} from "../../atoms/input-text/InputTextComponent";
import {createInputSelect} from "../../atoms/input-select/InputSelectComponent";
import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";

export const createElectionForm =
  ({
    title = 'Finden Sie die Branchenvertreter:innen Ihrer Region',
     backgroundColor = '',
     inlineStyles = 'background: ' + backgroundColor + ';',
     electionArea = true,
     placeholderElectionGroup = 'Wahlgruppe',
     placeholderElectionArea = 'Wahlbezirk',
     placeholderElectionCompany = 'Suche nach Name oder Firma',
  }) => {
    const electionForm = createElement('div', ['election-form'], null, null, inlineStyles);
    createElement('h2', [], title, electionForm);

    const form = createElement('form', ['election-form--form'], null, electionForm);
    const selectWrapper = createElement('div', ['input-wrapper'], null, form);
    selectWrapper.appendChild(createInputSelect({
      placeholder: placeholderElectionGroup,
      isRequired: true,
      id: 'election-group',
      name: 'election-group',
    }));
    if (electionArea) {
      const selectWrapper2 = createElement('div', ['input-wrapper'], null, form);
      selectWrapper2.appendChild(createInputSelect({
        placeholder: placeholderElectionArea,
        isRequired: true,
        id: 'election-area',
        name: 'election-area',
      }));
    }
    const inputWrapper = createElement('div', ['input-wrapper'], null, form);
    inputWrapper.appendChild(createInputText({
      placeholder: placeholderElectionCompany,
      isRequired: true,
      id: 'election-searchstring',
      name: 'election-searchstring',
    }));

    form.appendChild(createSearchButton({btnClass: 'secondary'}));


    return electionForm;
  }