<template>
  <div class="demo-page">
    <strong>OpenPanels</strong><br>
    <pre>{{ openPanels }}</pre>
    <br>

    <table
      class="demo-table"
      style="width: auto"
    >
      <tbody>
        <tr>
          <td class="demo-label">
            "Glossary Panel"<br>From left
          </td>
          <td>
            <TfButton
              @click="togglePanel('glossary')"
              v-text="'Toggle'"
            />
          </td>
          <td>
            <TfButton
              @click="openPanel('glossary')"
              v-text="'Open'"
            />
          </td>
          <td>
            <TfButton
              @click="closePanel('glossary')"
              v-text="'Close'"
            />
          </td>
        </tr>

        <tr>
          <td class="demo-label">
            "Status Bar Panel"<br>From left
            <br>Legacy status-bar prop
          </td>
          <td>
            <TfButton
              @click="togglePanel('status-bar')"
              v-text="'Toggle'"
            />
          </td>
          <td>
            <TfButton
              @click="openPanel('status-bar')"
              v-text="'Open'"
            />
          </td>
          <td>
            <TfButton
              @click="closePanel('status-bar')"
              v-text="'Close'"
            />
          </td>
        </tr>

        <tr>
          <td class="demo-label">
            "Volume Panel"<br>From right
          </td>
          <td>
            <TfButton
              @click="togglePanel('volume')"
              v-text="'Toggle'"
            />
          </td>
          <td>
            <TfButton
              @click="openPanel('volume')"
              v-text="'Open'"
            />
          </td>
          <td>
            <TfButton
              @click="closePanel('volume')"
              v-text="'Close'"
            />
          </td>
        </tr>

        <tr>
          <td class="demo-label">
            "Comments Panel"<br>From right
          </td>
          <td>
            <TfButton
              @click="togglePanel('comments')"
              v-text="'Toggle'"
            />
          </td>
          <td>
            <TfButton
              @click="openPanel('comments')"
              v-text="'Open'"
            />
          </td>
          <td>
            <TfButton
              @click="closePanel('comments')"
              v-text="'Close'"
            />
          </td>
        </tr>

        <tr>
          <td class="demo-label">
            "Product Setup Panel"<br>
            from right,<br>
            open,<br>
            no title,<br>
            with handle,<br>
            ignores other panels
          </td>
          <td>
            <TfButton
              @click="togglePanel('product-setup')"
              v-text="'Toggle'"
            />
          </td>
          <td>
            <TfButton
              @click="openPanel('product-setup')"
              v-text="'Open'"
            />
          </td>
          <td>
            <TfButton
              @click="closePanel('product-setup')"
              v-text="'Close'"
            />
          </td>
        </tr>

        <tr>
          <td class="demo-label">
            "Random Panel"<br>From right,<br>100px from top
          </td>
          <td>
            <TfButton
              @click="togglePanel('random')"
              v-text="'Toggle'"
            />
          </td>
          <td>
            <TfButton
              @click="openPanel('random')"
              v-text="'Open'"
            />
          </td>
          <td>
            <TfButton
              @click="closePanel('random')"
              v-text="'Close'"
            />
          </td>
        </tr>
      </tbody>
    </table>

    <!-- Left panels -->
    <TfPanel2
      :open="isPanelOpen('glossary')"
      position="left"
      title="Left Panel"
      max-width="200px"
      @togglePanel="togglePanel('glossary')"
      @closePanel="closePanel('glossary')"
    >
      <strong>Glossary panel</strong>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut ex veritatis est accusamus sint alias molestiae quia ratione voluptates ipsa molestias minima, pariatur velit nulla. Excepturi veniam reprehenderit nostrum!</p>
    </TfPanel2>

    <TfPanel2
      :animate="false"
      :status-bar="true"
      :open="isPanelOpen('status-bar')"
      position="left"
      title="Left Panel with 'status bar' (legacy)"
      max-width="275px"
      @togglePanel="togglePanel('status-bar')"
      @closePanel="closePanel('status-bar')"
    >
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae accusamus facere alias eveniet ipsa nostrum distinctio suscipit fugiat libero porro praesentium dolore neque pariatur aperiam iste, mollitia cumque nemo. Aliquam.</p>
    </TfPanel2>

    <!-- right panels -->
    <TfPanel2
      :animate="false"
      :handle="true"
      :start-open="true"
      :closable="false"
      :ignore-other-panels="true"
      :open="isPanelOpen('product-setup')"
      title="Product Setup With Handle"
      @togglePanel="togglePanel('product-setup')"
    >
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ut, quis cumque molestiae debitis vel possimus, esse qui. Ullam repellendus possimus quibusdam harum porro fugiat inventore natus nobis, beatae error!</p>
    </TfPanel2>

    <TfPanel2
      :open="isPanelOpen('volume')"
      title="Volume Panel"
      max-width="400px"
      @togglePanel="togglePanel('volume')"
      @closePanel="closePanel('volume')"
    >
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, accusamus ab harum hic, voluptate, iure laudantium possimus ipsam, deserunt optio ducimus. Temporibus, magni consectetur amet ea optio rem error deleniti!</p>
    </TfPanel2>

    <TfPanel2
      :open="isPanelOpen('comments')"
      title="Comments Panel"
      max-width="400px"
      @togglePanel="togglePanel('comments')"
      @closePanel="closePanel('comments')"
    >
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, accusamus ab harum hic, voluptate, iure laudantium possimus ipsam, deserunt optio ducimus. Temporibus, magni consectetur amet ea optio rem error deleniti!</p>
    </TfPanel2>

    <TfPanel2
      :open="isPanelOpen('random')"
      title="Random Panel"
      max-width="400px"
      :top="100"
      @togglePanel="togglePanel('random')"
      @closePanel="closePanel('random')"
    >
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, accusamus ab harum hic, voluptate, iure laudantium possimus ipsam, deserunt optio ducimus. Temporibus, magni consectetur amet ea optio rem error deleniti!</p>
    </TfPanel2>
  </div>
</template>

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

  export default {
    name: 'Panels',
    computed: {
      ...mapGetters([
        'isPanelOpen',
        'getPanelPositionValue',
      ]),
      ...mapState({
        openPanels: (state) => state.panels.openPanels,
      }),
    },

    created() {
      this.$store.dispatch('registerPanel', {
        name: 'glossary',
        position: 'left',
      });

      this.$store.dispatch('registerPanel', {
        name: 'status-bar',
        position: 'left',
      });

      this.$store.dispatch('registerPanel', {
        name: 'product-setup',
        startOpen: true,
        ignoreOtherPanels: true,
      });

      this.$store.dispatch('registerPanel', {
        name: 'volume',
      });

      this.$store.dispatch('registerPanel', {
        name: 'comments',
      });

      this.$store.dispatch('registerPanel', {
        name: 'random',
      });
    },

    methods: {
      /**
       * Call the store and dispatch an action to 'set' a specfic panel
       *
       * @param {string} name
       */
      togglePanel(name) {
        this.$store.dispatch('setPanel', {
          name,
        });
      },

      /**
       * Call the store and dispatch an action to 'open' a specfic panel
       *
       * @param {string} name
       */
      openPanel(name) {
        this.$store.dispatch('setPanel', {
          name,
          value: true,
        });
      },

      /**
       * Call the store and dispatch an action to 'close' a specfic panel
       *
       * @param {string} name
       */
      closePanel(name) {
        this.$store.dispatch('setPanel', {
          name,
          value: false,
        });
      },
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  pre {
    width: 300px;
    background: #eee;
    border: 1px #ddd solid;
    padding: 20px;
  }

  section {
    padding-left: 30px;
  }

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