<template>
  <div class="map-layer-selector" @mouseenter="toogleLayersOptions" @mouseleave="toogleLayersOptions">
    <ods-icon name="multiple" size="20"></ods-icon>
    <div class="map-layer-sector-opitons" v-if="isSelectLayersOptionsVisible">
      <ul>
        <MapLayerSelectorItem :asset="asset" v-for="asset in currentAssets()" :key="asset.id" />
      </ul>
    </div>
  </div>
</template>

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

import MapLayerSelectorItem from '@/components/map/MapLayerSelectorItem';

export default {
  name: 'MapLayerSelector',
  components: {MapLayerSelectorItem},
  data() {
    return {isSelectLayersOptionsVisible: false};
  },
  methods: {
    ...mapGetters([
      'currentAssets',
    ]),
    toogleLayersOptions() {
      this.isSelectLayersOptionsVisible = !this.isSelectLayersOptionsVisible;
    },
  },
};
</script>

<style lang="scss" scoped>
.map-layer-selector {
  position: relative;
  background-color: #FFF;
  padding: 10px 15px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,.1);
  width: 30px;
  cursor: pointer;
  .map-layer-sector-opitons {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.1);
    padding: 15px;
    z-index: 999;
    width: 100px;
  }
}
</style>
