<template>
  <div :class="['diagram-legend', { collapsed }]">
    <span class="box-control toggle" @click="collapsed = !collapsed">
      <font-awesome-icon icon="angle-left" fixed-width />
    </span>
    <div
      class="d-flex align-items-center justify-content-center w-100"
      style="overflow: hidden"
      v-if="!collapsed"
    >
      <div class="text-left px-3">
        <slot />
      </div>
    </div>
  </div>
</template>

<style>
.diagram-legend {
  position: relative;
  width: 180px;
  font-size: 0.8rem;
  display: flex;
  border-right: solid 1px #dee2e6;
}
.diagram-legend .toggle {
  margin-left: 0;
  position: absolute;
  z-index: 1;
  top: 0.25rem;
  left: 0.25rem;
}
.diagram-legend .toggle svg {
  transition: transform 0.3s;
}
.diagram-legend.collapsed {
  width: 0;
  border-right: none;
}
.diagram-legend.collapsed .toggle {
  left: 0.25rem;
}
.diagram-legend.collapsed .toggle svg {
  transform: rotateY(180deg);
}
.diagram-legend .legend {
  margin: 10px 0;
}
.diagram-legend .legend span {
  vertical-align: middle;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
</style>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */

export default {
  data() {
    return {
      collapsed: false
    };
  },
  watch: {
    collapsed() {
      this.$nextTick(this.$parent.drawDiagram);
    }
  }
};
</script>