Popover

function popoverPlayground() {
  const playgroundControls = document.querySelector(
    '.popover-demo__controls-container');
  if (!playgroundControls) return;
  const container = document.querySelector('.bux-popover__container');
  const caret = document.querySelector('.bux-popover__caret');

  if (!container || !caret) {
    return;
  }

  const createRadioInput = (groupName, label, value) => {
    const labelElement = document.createElement('label');
    labelElement.classList.add('radio-input');
    const labelTextElement = document.createElement('span');
    labelTextElement.appendChild(document.createTextNode(label));
    labelTextElement.classList.add('radio-input__label-text');
    const inputElement = document.createElement('input');
    inputElement.classList.add('radio-input__input-element');
    inputElement.setAttribute('type', 'radio');
    inputElement.setAttribute('value', value);
    inputElement.setAttribute('name', groupName);
    labelElement.appendChild(inputElement);
    labelElement.appendChild(labelTextElement);
    return labelElement;
  };

  const createControls = (groupName, group) => Object.entries(group)
    .map(([name, className]) => createRadioInput(groupName, name, className));

  const containerPositionControls = createControls('container-position',
    $popoverConfig.classNames.container.position);

  const containerCaretAlignControls = createControls('container-caret-align',
    $popoverConfig.classNames.container.caret.align);
  const containerCaretJustifyControls = createControls('container-caret-justify',
    $popoverConfig.classNames.container.caret.justify);

  const caretAlignControls = createControls('caret-align',
    $popoverConfig.classNames.caret.align);
  const caretJustifyControls = createControls('caret-justify',
    $popoverConfig.classNames.caret.justify);



  const createControlsGroup = (header, controls) => {
    const groupElement = document.createElement('div');
    groupElement.classList.add('control-group');
    const headerElement = document.createElement('h2');
    headerElement.classList.add('control-group__header');
    headerElement.appendChild(document.createTextNode(header));
    groupElement.appendChild(headerElement);
    controls.forEach((control) => {
      groupElement.appendChild(control);
    });
    playgroundControls.appendChild(groupElement);
    return groupElement;
  };

  const positionGroup = createControlsGroup('Container position',
    containerPositionControls);
  const containerAlignGroup = createControlsGroup('Container alignment to caret',
    containerCaretAlignControls);
  const containerJustifyGroup = createControlsGroup(
    'Container justification to caret',
    containerCaretJustifyControls);
  const caretAlignGroup = createControlsGroup('Caret alignment to trigger',
    caretAlignControls);
  const caretJustifyGroup = createControlsGroup('Caret justification to trigger',
    caretJustifyControls);


  const showJustifyGroups = () => {
    containerJustifyGroup.classList.remove('hidden');
    caretJustifyGroup.classList.remove('hidden');
  };

  const showAlignGroups = () => {
    containerAlignGroup.classList.remove('hidden');
    caretAlignGroup.classList.remove('hidden');
  };

  const hideJustifyGroups = () => {
    containerJustifyGroup.classList.add('hidden');
    caretJustifyGroup.classList.add('hidden');
  };

  const hideAlignGroups = () => {
    containerAlignGroup.classList.add('hidden');
    caretAlignGroup.classList.add('hidden');
  };

  const removeAlignChoices = () => {
    containerCaretAlignControls.forEach((alignControl) => {
      alignControl.querySelector('input').checked = false;
      container.classList.remove(alignControl.querySelector('input').value);
    });
    caretAlignControls.forEach((alignControl) => {
      alignControl.querySelector('input').checked = false;
      caret.classList.remove(alignControl.querySelector('input').value);
    });
  };

  const removeJustifyChoices = () => {
    containerCaretJustifyControls.forEach((justifyControl) => {
      justifyControl.querySelector('input').checked = false;
      container.classList.remove(justifyControl.querySelector('input').value);
    });
    caretJustifyControls.forEach((justifyControl) => {
      justifyControl.querySelector('input').checked = false;
      caret.classList.remove(justifyControl.querySelector('input').value);
    });
  };

  const setDefaultJustifyChoices = () => {
    containerCaretJustifyControls[1].querySelector('input').checked = true;
    container.classList.add($popoverConfig.classNames.container.caret.justify.center);

    caretJustifyControls[1].querySelector('input').checked = true;
    caret.classList.add($popoverConfig.classNames.caret.justify.triggerCenter);
  };

  const setDefaultAlignChoices = () => {
    containerCaretAlignControls[1].querySelector('input').checked = true;
    container.classList.add($popoverConfig.classNames.container.caret.align.center);

    caretAlignControls[1].querySelector('input').checked = true;
    caret.classList.add($popoverConfig.classNames.caret.align.triggerCenter);
  };

  const setDefaultPositionChoices = () => {
    containerPositionControls[1].querySelector('input').checked = true;
    container.classList.remove(...Object.values($popoverConfig.classNames.container.position));
    container.classList.add($popoverConfig.classNames.container.position.below);
    switchToAboveBelow();
  };

  const switchToAboveBelow = () => {
    hideAlignGroups();
    showJustifyGroups();
    removeAlignChoices();
    removeJustifyChoices();
    setDefaultJustifyChoices();
  };

  const switchToLeftRight = () => {
    hideJustifyGroups();
    showAlignGroups();
    removeJustifyChoices();
    removeAlignChoices();
    setDefaultAlignChoices();
  };

  containerPositionControls.forEach((control) => {
    control.querySelector('input').addEventListener('change', (e) => {
      if (!e.target.checked) return;
      if (['container--position-above-trigger', 'container--position-below-trigger'].includes(
        e.target.value)) {
        switchToAboveBelow();
      } else {
        switchToLeftRight();
      }
      container.classList.remove(...Object.values($popoverConfig.classNames.container.position));
      container.classList.add(e.target.value);
      window.dispatchEvent(new Event('bux:popover:update-position'));
    });
  });

  const addControlListeners = (group, classNameGroup, targetElement) => {
    group.forEach((radio) => {
      radio.addEventListener('change', (e) => {
        if (!e.target.checked) return;
        Object.values(classNameGroup).forEach((className) => {
          targetElement.classList.remove(className);
        });
        targetElement.classList.add(e.target.value);
        window.dispatchEvent(new Event('bux:popover:update-position'));
      });
    });
  };

  addControlListeners(containerCaretAlignControls,
    $popoverConfig.classNames.container.caret.align,
    container);
  addControlListeners(containerCaretJustifyControls,
    $popoverConfig.classNames.container.caret.justify,
    container);
  addControlListeners(caretAlignControls,
    $popoverConfig.classNames.caret.align,
    caret);
  addControlListeners(caretJustifyControls,
    $popoverConfig.classNames.caret.justify,
    caret);

  setDefaultPositionChoices();

}

popoverPlayground();