<template>
  <li :class="{ selected: asset.isSelected }" @click="toggleAsset(asset)">
    <div class="icon-layer">
      <ods-icon :name="asset.icon" size="16" :color="asset.isSelected ? '#2e6c99' : '#666'"></ods-icon>
    </div>
    <p>{{ asset.type }}</p>
  </li>
</template>

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

export default {
  name: 'map-layer-selector-item',
  props: ['asset'],
  methods: {
    ...mapGetters([
      'currentAssets',
    ]),
    ...mapMutations([
      'toogleSelectedAsset',
    ]),
    toggleAsset(asset) {
      this.toogleSelectedAsset(asset);
      document
        .getElementById('dataIframe')
        .contentWindow
        .toogleLayers(this.currentAssets());
    },
  },
};
</script>

<style lang="scss" scoped>
li {
  display: flex;
  align-items: center;
  &.selected {
    .icon-layer {
      border: 1px solid rgba(157, 193, 218, 0.80);
      background-color:rgba(157, 193, 218, 0.30);
    }
  }
  &:first-child {
    margin-bottom: 15px;
  }
  .icon-layer {
    border-radius: 50%;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #CCC;
  }
  p {
    font-size: 10px;
    text-transform: uppercase;
    color: #444;
  }
}
</style>
