/**
 * Update the Drop Choice summary which specifies first couple selected items and then remaining count.
 * @param dropChoiceSelector - Drop Choice Component selector
 */
function updateDropChoiceSummary(dropChoiceSelector) {
  let i = 0,
    checkedInput,
    checkedInputNameArray = [],
    choiceInputCheckedSelector = `${dropChoiceSelector} div.filter-choice input[type=checkbox]:checked`,
    choiceInputCheckedNodes = document.querySelectorAll(
      choiceInputCheckedSelector
    ),
    summaryOutputSelector = `${dropChoiceSelector} .mmui-drop-select-summary`,
    summaryOutputElmt = document.querySelector(summaryOutputSelector),
    countOutputSelector = `${dropChoiceSelector} .mmui-drop-select-count`,
    countOutputElmt = document.querySelector(countOutputSelector),
    remainingCount,
    summary = '';
  for (i = 0; i < choiceInputCheckedNodes.length; i++) {
    checkedInput = choiceInputCheckedNodes[i];
    checkedInputNameArray.push(checkedInput.dataset.name);
    if (i >= 1) {
      break;
    }
  }
  summary = '' + checkedInputNameArray.join(', ');
  remainingCount =
    choiceInputCheckedNodes.length - checkedInputNameArray.length;
  if (remainingCount > 0) {
    countOutputElmt.innerHTML = `&nbsp;+${remainingCount}`;
  } else {
    countOutputElmt.innerHTML = '';
  }
  summaryOutputElmt.innerHTML = summary;
}

/**
 * Add Drop Choice summary update event listening behavior.
 * @param dropChoiceSelector - Drop Choice Component selector
 */
export function addDropChoiceSummaryBehavior(dropChoiceSelector) {
  const choiceInputSelector = `${dropChoiceSelector} div.filter-choice input[type=checkbox]`,
    choiceInputNodes: NodeListOf<Element> =
      document.querySelectorAll(choiceInputSelector);
  updateDropChoiceSummary(dropChoiceSelector);

  for (let i = 0; i < choiceInputNodes.length; i++) {
    const choiceInput = choiceInputNodes.item(i);
    choiceInput.addEventListener('change', () => {
      updateDropChoiceSummary(dropChoiceSelector);
    });
  }
}

/**
 * Add choice selection filter behavior to a Drop Choice.
 * This behavior makes the filter box reduce the number of select choices on input.
 * @param dropChoiceSelector - Drop Choice Component selector
 */
function addDropChoiceSelectionFilterBehavior(dropChoiceSelector) {
  const choiceSelectionFilterInput = document.querySelector(
    `${dropChoiceSelector} .mmui-drop-select-choice-filter`
  );

  if (choiceSelectionFilterInput) {
    choiceSelectionFilterInput.addEventListener('input', function (evt: Event) {
      let value = (evt.target as HTMLInputElement).value,
        choiceInputsSelector = `${dropChoiceSelector} div.filter-choice`,
        choiceInputs = document.querySelectorAll(choiceInputsSelector),
        choiceInputName;

      if (value) {
        value = value.toLowerCase();
      }

      for (let i = 0; i < choiceInputs.length; i++) {
        const choiceInput: any = choiceInputs.item(i);
        if (value) {
          choiceInputName = choiceInput.dataset.name;
          if (
            choiceInputName &&
            choiceInputName.toLowerCase().includes(value)
          ) {
            choiceInput.classList.remove('d-none');
          } else {
            choiceInput.classList.add('d-none');
          }
        } else {
          choiceInput.classList.remove('d-none');
        }
      }
    });
  }
}

/**
 * Add behavior to enables toggle of a choice in a parent Drop Choice to toggle visability of a section in the child Drop Choice.
 * @param parentDropChoiceSelector - parent Drop Choice Component
 * @param childDropChoiceSelector - child Drop Choice Component
 */
export function addDropChoiceParentSelectionFilterBehavior(
  parentDropChoiceSelector,
  childDropChoiceSelector
) {
  let parentChoiceInputSelector = `${parentDropChoiceSelector} div.filter-choice input[type=checkbox]`,
    parentChoiceInputNodes = document.querySelectorAll(
      parentChoiceInputSelector
    ),
    childCheckSelector,
    childCheckNodes,
    childCheckNode,
    updateParentChildrenVisability = (parentName, isChecked = false) => {
      const parentGroupSelector = `${childDropChoiceSelector} div.filter-parent-choice[data-parentname='${parentName}']`,
        parentGroupNode = document.querySelector(parentGroupSelector);
      if (parentGroupNode) {
        if (isChecked) {
          parentGroupNode.classList.remove('d-none');
        } else {
          childCheckSelector = `${childDropChoiceSelector} div.filter-parent-choice[data-parentname='${parentName}'] input[type=checkbox]:checked`;
          childCheckNodes = document.querySelectorAll(childCheckSelector);
          if (childCheckNodes) {
            for (childCheckNode of childCheckNodes) {
              childCheckNode.checked = false;
            }
          }
          updateDropChoiceSummary(childDropChoiceSelector);
          parentGroupNode.classList.add('d-none');
        }
      }
    };
  for (let i = 0; i < parentChoiceInputNodes.length; i++) {
    const parentChoiceInputNode: any = parentChoiceInputNodes.item(i);
    const parentChoiceName = parentChoiceInputNode.dataset.name;
    updateParentChildrenVisability(
      parentChoiceName,
      parentChoiceInputNode.checked
    );
    parentChoiceInputNode.addEventListener('change', (evt) => {
      updateParentChildrenVisability(parentChoiceName, evt.target.checked);
    });
  }
}

/**
 * Add Drop Choice Component behavior which includes button toggle, choice filter, and summary update.
 * @param dropChoiceSelector - Drop Choice Component selector
 */
export function addDropChoiceBehavior(dropChoiceSelector) {
  addDropChoiceSummaryBehavior(dropChoiceSelector);
  addDropChoiceSelectionFilterBehavior(dropChoiceSelector);

  //toggle dropdown
  const dropdownButton = document.querySelector(
      `${dropChoiceSelector} .mmui-btn-dropdown`
    ),
    dropSelectBodyElmt = document.querySelector(
      `${dropChoiceSelector} .mmui-drop-select-body`
    );
  dropdownButton.addEventListener('click', () => {
    dropSelectBodyElmt.classList.toggle('d-none');
  });
}