<template>
  <section class="container mainContent">
    <div class="row d-flex flex-column justify-content-center">
      <h1 class="text-center">Locations</h1>
      <h4 class="text-center d-flex flex-column">
        Active Locations: {{filteredLocations.length}}
        <small>Total Available: {{locationList.length}} +</small>
      </h4>
    </div>
    <hr/>
    <div class="row">
      <div class="col-md-4" v-show="locationsAvailable">
        <b-list-group class="list_locations">
          <b-list-group-item v-for="(c, key) in locationsByCountry"
            :key="c[0].metro_id" class="country_header">
            <div class="country_name d-flex align-items-center">
              <no-ssr>
                <flag :iso="c[0].country_code" :squared="false" />
              </no-ssr>
              <nuxt-link class="country_link"
                :to="{ name:'country-slug', params: { slug: c[0].country_meta.slug } }">
                {{key}}
              </nuxt-link>
              <b-badge variant="secondary" size="sm" pill>
                {{c.length}}
              </b-badge>
              <span
                class="collapseToggle"
                @click="showCollapse = showCollapse === key ? null : key"
              >
                <img src="/img/icons/minus-violet.png" v-if="showCollapse === key">
                <img src="/img/icons/plus-violet.png" v-else>
              </span>
            </div>
            <b-collapse :id="key" :visible="showCollapse === key">
              <b-list-group class="_cities">
                <b-list-group-item v-for="city in c"
                  :key="city.metro_id" class="cities_list_item">
                  <nuxt-link
                    :to="{
                      name:'country-metro-slug',
                      params: {
                        metro: city.country_meta.slug,
                        slug: city.slug
                      }
                    }">
                    {{city.city}}
                  </nuxt-link>
                </b-list-group-item>
              </b-list-group>
            </b-collapse>
          </b-list-group-item>
        </b-list-group>
      </div>
      <div class="col-md-8">
        <locations-map :data="locationsByCountry"/>
      </div>
    </div>
  </section>
</template>

<style lang="scss">
  html, body {
     width: 100%;
     height: 100%;
  }
  span.badge {
    font-weight: 700;
    border-radius: 10rem;
    margin-left: auto;
  }
  .collapseToggle {
    margin-left: 5px;
    img {
      width: 15px;
    }
    &:hover {
      cursor: pointer;
    }
  }
  ._cities {
    margin-top: 8px;
    font-size: .8rem;
  }
  .cities_header {
    margin-left: 12px;
    margin-bottom: -8px;
    font-size: .8rem;
  }
  /*.country_link {*/
  /*  font-weight: 600;*/
  /*}*/
  .list-group-item.cities_list_item {
    padding: .15rem 1.25rem;
  }
  .list_locations {
    /*display: block;*/
    max-height: 500px;
    overflow-y: scroll;
  }
  .flag-icon {
    margin-right: 10px;
  }
  .country_header {
    background: #FCFCFC;
    padding: 5px;
    margin-bottom: -5px;
  }
  li.list-group-item.country_header {
    padding-left: 8px;
  }
  .list-group._cities {
    padding-left: 10px;
  }
  .list-group-item {
    padding-left: 25px;
  }
</style>

<script>
/* eslint-disable */
import { mapGetters } from 'vuex';
import * as _ from 'lodash';
import LocationsMap from '@/components/atoms/LocationsMap';
export default {
  components: {
    LocationsMap,
  },
  computed: {
    ...mapGetters('location', { locationList: 'list' }),
    locationsAvailable() {
      return this.locationList.length
    },
    filteredLocations() {
      const uniqLocations = _.uniqBy(this.locationList, 'metro_id');
      return uniqLocations.filter(metro => metro.nodes.length);
    },
    locationsByCountry() {
      if (!this.filteredLocations.length) return [];
      const countryData = _.groupBy(this.filteredLocations, 'country');
      const countriesSorted = {};
      // sort the countries
      Object.keys(countryData)
        .sort()
        .forEach(key => (
          countriesSorted[key] = countryData[key]
        ));
      // sort the cities within the countries
      Object.keys(countriesSorted)
        .forEach(key => countriesSorted[key]
          .sort((a, b) => {
            if (a.city < b.city) return -1;
            if (a.city > b.city) return 1;
            return 0;
          }));
      return countriesSorted;
    },
  },
  data() {
    return {
      showCollapse: null,
    };
  },
  head() {
    return {
      title: 'Locations',
    };
  },
};
</script>