/*
 * Show/Hide
 * Part of the JSS-01 | JavaScript Software Synthesizer project
 * Copyright (c) 2023 Michael Kolesidis <michael.kolesidis@gmail.com>
 * GNU Affero General Public License v3.0
 *
 * The Show/Hide function allows the user to hide and show a
 * section by clicking on its title. The two arguments displayInput
 *  and displayOutput are the display property we are targeting and
 * the one we are switching to, respectively. On most occasions, displayInput
 * will be set to the display property of the section we want to hide
 * (ex. flex, grid, block) and displayOutput will be set to "none".
 * If a section  is hidden initially, we set displayInput to "none"
 * and diplay output the desired display property we want to set.
 *
 */

export default function showHide(
  title: HTMLElement,
  section: HTMLElement,
  displayInput: string,
  displayOutput: string
) {
  // (title, section)
  title.addEventListener("click", function () {
    if (section.style.display === displayInput || !section.style.display) {
      section.style.display = displayOutput;
    } else {
      section.style.display = displayInput;
    }
  });
}