import $ from 'jquery';
import './checkbox-group.scss';
import {createFormElement} from "../form-element/FormElementComponent";
import {createElement} from "../../_global/scripts/helpers";
import IHKCheckboxGroup from "./checkbox-group";

export const createCheckboxGroup = ({
  wrapperClass = 'ev-filter-wrapper',
  title = 'Branchen',
  items = ['Dienstleistungen', 'Handel', 'Industrie', 'Verkehr'],
  namespace = 'branchen',
}) => {
  const wrapper = createFormElement({
    inputType: 'checkbox',
    label: '<a role="button" href="#">' + title + '</a>',
    wrapperClasses: 'checkbox-group ' + wrapperClass,
    name: namespace,
  });
  const childWrapper = createElement('div', ['ev-filter', 'checkbox-wrapper'], null, wrapper);
  childWrapper.ariaHidden = true;

  wrapper.querySelector('label').classList.add('acc');

  items.map((item, index) => {
    childWrapper.appendChild(createFormElement({
      inputType: 'checkbox',
      label: item,
      name: namespace,
      id: namespace + '-' + index,
    }))
  })

  $(document).ready(() => {
    new IHKCheckboxGroup($(wrapper));
  })

  return wrapper;
}