<template>
  <div>
    <v-header :invisibleBeforeStick="false" :stickAfter="0"></v-header>
    <div class="container">
      <div class="row">
        <div class="col-12  py-10">
          <h1 class="calculate-item__title black bold">
            We deliver every 2 weeks.
          </h1>
          <p class="calculate-item__desc text-primary text-primary--bigger gray mt-3">
            Experienced teams led by professional PMs.
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 mb-5 hidden-md-up">

          <button class="show-filters-button"
                  @click.stop="toggleBlockVisibility('team-filters', 'hidden-sm-down', $event)">
            <span class="no-events">show filters</span>
          </button>

        </div>
      </div>
      <div class="row justify-content-between mb-10 hidden-sm-down" id="team-filters">
        <div class="col-12 col-md-auto">

          <dropdown :options="platformsName"
                    :chosen="currentProjectType"
                    @value="platformFilterChanged($event)"></dropdown>

        </div>
        <div class="col-12 col-md-auto mt-3 mt-md-0" style="margin-right: auto">

          <dropdown :options="industryNames"
                    :chosen="currentProjectIndustry"
                    @value="industryFilterChanged($event)"></dropdown>

        </div>
        <div class="col-12 col-md-auto mt-3 mt-md-0">

          <!--<dropdown :options="projectFilters"-->
          <!--:chosen="'Experience'"-->
          <!--@value="experienceFilterChanged($event)"></dropdown>-->

        </div>
      </div>
    </div>
    <div class="container pb-5">
      <div class="row">
        <div class="col-12">
          <div class="align-items-center justify-content-center team-card-stub">
            <h3 class="text-center black uppercase">Nothing to show. Sorry.</h3>
          </div>

          <div v-if="!teamsFetched"
               style="width: 100%; height: 300px;"
               class="d-flex justify-content-center align-items-center">
            <spinner :size="'50px'"></spinner>
          </div>

          <transition-group appear name="fade">
            <router-link v-for="(team, index) in teams"
                         v-if="doesTeamContainProjectPlatform(team) && doesTeamContainIndustry(team)"
                         :to="{ name: 'Team', params: { name: team.slug }}"
                         :key="team.id"
                         :class="['d-block no-underline mb-5']">
              <team-card :team="team"
                         @click.native="chooseTeam(team.id)"></team-card>
            </router-link>
          </transition-group>


        </div>
      </div>
    </div>

    <footer-section></footer-section>
  </div>
</template>

<script>
  import { mapActions, mapState, mapGetters } from 'vuex';
  import _ from 'lodash';
  import qs from 'querystring';
  import vHeader from '../common/header/index';
  import footerSection from '../blocks/footer';
  import teamCard from '../blocks/teamCard/teamCardDefault';
  import dropdown from '../bases/dropdown';
  import spinner from '../bases/spinner';
  import {
    trackTeamsListPlatformFilter,
    trackTeamsListIndustryFilter,
    trackTeamsListExperienceFilter,
  } from '../../services/analytics';

  const SORT = {
    EXPERIENCE: 'Experience',
    SIZE: 'Bigger teams',
    PROJECTS: 'Projects completed',
  };

  const SELECTBOX_ALL_VALUE = 'All';

  function withAll(items) {
    return [SELECTBOX_ALL_VALUE].concat(items);
  }

  export default {
    name: 'Teams',
    data() {
      return {
        teamsFetched: false,
        filterTeamsByPlatform: '',
        filterTeamsByIndustry: '',
        filterQuery: '',
        sortTeamsBy: '',
        projectFilters: [
          SORT.EXPERIENCE,
          SORT.SIZE,
          SORT.PROJECTS,
        ],
      };
    },
    components: {
      vHeader,
      teamCard,
      dropdown,
      spinner,
      footerSection,
    },
    watch: {
      filterTeamsByPlatform() {
        this.filterQuery = this.projectsFilterQuery();
      },
      filterTeamsByIndustry() {
        this.filterQuery = this.projectsFilterQuery();
      },
    },
    methods: {
      ...mapActions([
        'chooseTeam',
        'setTeams',
        'appendTeams',
        'setPlatforms',
        'setProjectIndustry',
        'setIndustries',
      ]),
      toggleBlockVisibility(id, className, event) {
        const el = document.getElementById(id);

        // Dirty solution TODO fix later
        if (event.target.classList.contains('show-filters-button')) {
          event.target.classList.toggle('show-filters-button--active');
        }

        return el.classList.toggle(className);
      },
      sortTeams(filter) {
        switch (filter) {
          case SORT.EXPERIENCE:
            return this.sortTeamsByYearsActive;
          case SORT.SIZE:
            return this.sortTeamsByBiggerTeam;
          case SORT.PROJECTS:
            return this.sortTeamsByProjectsCompleted;
          default:
            return this.sortTeamsByYearsActive;
        }
      },
      doesTeamContainProjectPlatform(team) {
        if (this.filterTeamsByPlatform === SELECTBOX_ALL_VALUE) {
          return true;
        }

        return team.projects && team.projects
          .some(project => project.platforms
            .some(platform => platform.platform.name === this.filterTeamsByPlatform));
      },
      doesTeamContainIndustry(team) {
        const industryName = this.filterTeamsByIndustry || this.currentProjectIndustry;

        if (industryName === SELECTBOX_ALL_VALUE) {
          return true;
        }

        return team.projects && team.projects
          .some((project) => {
            if (project.industry === null) {
              return false;
            }

            return project.industry.name === industryName;
          });
      },
      platformFilterChanged($event) {
        if (this.filterTeamsByPlatform) {
          trackTeamsListPlatformFilter($event);
        }

        this.filterTeamsByPlatform = $event;
      },
      industryFilterChanged($event) {
        if (this.filterTeamsByIndustry) {
          trackTeamsListIndustryFilter($event);
        }

        this.filterTeamsByIndustry = $event;
      },
      experienceFilterChanged($event) {
        if (this.sortTeamsBy) {
          trackTeamsListExperienceFilter($event);
        }

        this.sortTeamsBy = $event;
      },
      projectsFilterQuery() {
        const params = {
          projects__industry_id: _.find(this.industries, { slug: this.filterTeamsByIndustry }),
          projects__platforms__platform_id: _.find(this.platforms, {
            name: this.filterTeamsByPlatform,
          }),
        };

        const query = Object.keys(params)
          .filter(key => params[key])
          .reduce((acc, key) => Object.assign({
            [key]: params[key],
          }, acc), {});

        return `/api/v1/teams?${qs.stringify(query)}`;
      },
    },
    computed: {
      ...mapGetters([
        'sortTeamsByYearsActive',
        'sortTeamsByProjectsCompleted',
        'sortTeamsByBiggerTeam',
        'sortTeamsByYearsActive',
      ]),
      ...mapState({
        teams: state => state.base.teams,
        industries: state => state.base.industries,
        platforms: state => state.base.platforms,
        industryNames: state => withAll(Object.values(state.base.industries).map(el => el.name)),
        currentProjectType: state => SELECTBOX_ALL_VALUE || state.project.type,
        currentProjectIndustry: (state) => {
          const industry = _.find(state.base.industries, {
            id: state.project.industry,
          });

          return (industry && industry.name) || SELECTBOX_ALL_VALUE;
        },
        currentProjectTeamName: state => state.project.team || '',
        platformsName: state => withAll(state.base.platforms.map(el => el.name)),
      }),
    },
    created() {
      this.$http.get('teams?limit=100500&with=projects,awards,members,clients&enabled=1')
        .then((response) => {
          this.setTeams(response.body.payload);
          this.teamsFetched = true;
        }, () => {});

      this.$http.get('industries')
        .then((response) => {
          this.setIndustries(response.body.payload);
        }, () => {});

      this.$http.get('platforms').then((response) => {
        this.setPlatforms(response.body.payload);
      }, () => {});
    },
  };
</script>

<style lang="scss">
  @import "../../assets/styles/elements/teams-page.scss";
  @import "../../assets/styles/elements/show-filters-button";
</style>