<template>
  <div class="demo-page">
    <table class="demo-table">
      <tbody>
        <tr>
          <td class="demo-label">
            Open via router
          </td>
          <td>
            <TfButton
              @click="toggleOriginalPanelViaRouter"
            >
              Toggle
            </TfButton>
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Open via store
          </td>
          <td>
            <TfButton
              @click="toggleOriginalPanelViaStore"
            >
              Toggle
            </TfButton>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import { mapState } from 'vuex';

  export default {
    name: 'Panels',

    computed: {
      ...mapState({
        panel: (state) => state.panelsV1.panel,
      }),
    },
    methods: {
      /**
       * Open a panel via the router
       */
      toggleOriginalPanelViaRouter() {
        if (!this.panel.open) {
          this.$router.push({ path: `${this.$route.path}/toggle-panel` });
        }
      },

      /**
       * Open a panel using the store
       */
      toggleOriginalPanelViaStore() {
        this.$store.dispatch('togglePanelV1', !this.panel.open);
      },
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  section {
    padding-left: 30px;
  }

  li {
    margin-bottom: 5px;
  }
</style>

<style>
.legacy-panel {
  top: 54px;
  /* stylelint-disable declaration-no-important  */
  height: calc(100vh - 54px) !important;
  /* stylelint-enable declaration-no-important  */
  overflow: auto;
}
</style>
