<template>
  <div class="menu-row">
    <h2 :id="rowTitle" @click="updateActiveMenu">
      {{ rowTitle }}
    </h2>
    <div v-if="activeMenu === rowTitle" class="menu-row-content">
      <slot />
    </div>
  </div>
</template>

<script>
  import { mapWritableState } from "pinia";
  import { globalStore } from "../stores/index.js";

  export default {
    name: "MenuRow",
    props: {
      rowTitle: {
        type: String,
        default: "",
      },
    },
    computed: {
      // TODO: should be passed as a props/slot, not in a store
      ...mapWritableState(globalStore, ["activeMenu"]),
    },
    methods: {
      updateActiveMenu(event) {
        const elem = event.target;
        const value = elem.id;
        if (value == this.activeMenu) this.activeMenu = "";
        else this.activeMenu = value;
      },
    },
  };
</script>

<style>
  .menu-row h2 {
    font-size: medium;
    padding: 10px;
    cursor: pointer;
    border: 2px solid darkgrey;
    margin: 0 0 10px 0;
  }

  select {
    margin-top: 10px;
    padding: 5px;
  }

  input[type="button"] {
    min-width: 60px;
    padding: 5px;
    font-weight: bold;
    margin-right: 10px;
  }

  .form-field {
    display: flex;
    margin: 10px;
    justify-content: space-between;
  }

  .menu-row {
    flex: 1;
  }

  label,
  .form-field label {
    margin-right: 10px;
    font-weight: bold;
  }
</style>
