<!--
   Copyright 2018 Brigham Young University

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->
<template>
  <div ref="container" class="header-container bg-secondary text-white" @mouseenter="mouseenter" @mouseleave="mouseleave">

    <transition name="scale">
    <div v-if="compact" class="applicant-details compact" key="compact">
      <div class="star" v-if="!hideStar && appId" :title="userFlag.isActive ? 'Remove from Tracking List' : 'Add to Tracking List'">
        <starred-indicator :set="userFlag.isActive" @click="toggleApplicationStar" />
      </div>
      <div class="name">
        <slot name="applicantNameCompact"></slot>
      </div>
      <div class="applicant">
        <slot name="applicantInfoCompact"></slot>
      </div>
      <div class="additional">
        <slot name="additionalInfoCompact"></slot>
      </div>
      <div class="actions bg-light text-body">
        <slot name="actionsCompact"></slot>
      </div>
      <div class="bug" v-if="!hideBug">
        <button class="btn btn-sm btn-outline-warning" title="Submit an incident" @click="openSupportModal">
          <font-awesome-icon :icon="bug" />
        </button>
      </div>
    </div>
    <div v-else class="applicant-details" key="expanded">
      <div class="star" v-if="!hideStar && appId" :title="userFlag.isActive ? 'Remove from Tracking List' : 'Add to Tracking List'">
        <starred-indicator :set="userFlag.isActive" @click="toggleApplicationStar" />
      </div>
      <div class="name">
        <slot name="applicantName">
        <h2>{{application.applicantName}}</h2>
        </slot>
      </div>
      <div class="applicant">
        <slot name="applicantInfo">
        <ApplicantInfo/>
        </slot>
      </div>
      <div class="additional">
        <slot name="additionalInfo"></slot>
      </div>
      <div class="actions bg-light text-body">
        <slot name="actions"></slot>
      </div>
      <div class="bug" v-if="!hideBug">
        <button class="btn btn-sm btn-outline-warning" @click="openSupportModal">
          <font-awesome-icon :icon="bug" />
        </button>
      </div>
    </div>
    </transition>
    <SupportDialog />
  </div>
</template>
<script>
import get from 'lodash.get'
import { mapState, mapGetters, mapActions } from 'vuex'
import StarredIndicator from './StarredIndicator'
import ApplicantInfo from './ApplicantInfo'
import { yearTermFormat } from './dateTimeFormat'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faBug } from '@fortawesome/free-solid-svg-icons'
import SupportDialog from './SupportDialog'

export default {
  name: 'DetailsHeader',
  components: {
    SupportDialog,
    ApplicantInfo,
    StarredIndicator,
    FontAwesomeIcon
  },
  props: {
    hideStar: {
      type: Boolean,
      default: false
    },
    hideBug:{
      type:Boolean,
      default: false
    },
    appId: {
      type: String
    }
  },
  data () {
    return {
      compact: false,
      justShrank: false,
      shrinkYLimit: 0,
      justGrew: false,
      hovering: false
    }
  },
  computed: {
    ...mapState({
      userInfo: 'userInfo',
      application: 'application'
    }),
    ...mapGetters(['flagByValue']),
    bug() {
      return faBug
    },
    userFlag () {
      const byuId = get(this.userInfo, 'byuId')
      if (!byuId) {
        return null
      }
      return this.flagByValue('S-' + byuId)
    }
  },
  methods: {
    ...mapActions(['flagUpdate']),
    toggleApplicationStar() {
      if (!this.appId) return
      const userFlagSet = this.userFlag.isActive
      this.flagUpdate({
        applicationUuid: this.appId,
        note: userFlagSet ? `Don't track this application` : `Track this application`,
        flagValue: 'S-' + this.userInfo.byuId,
        flagState: userFlagSet ? 'clear' : 'set'
      })
    },
    handleScroll () {
      if (!this.hovering) {
        const containerElem = this.$refs.container
        if (!containerElem || !containerElem.getBoundingClientRect) {
          return
        }
        const containerTopY = containerElem.getBoundingClientRect().top
        // Prevent flickering when just over the scroll threshold
        if (this.justShrank) {
          if (containerTopY > 0) {
            this.shrinkYLimit = containerTopY
            this.justShrank = false
          }
        } else if (containerTopY < this.shrinkYLimit) {
          this.shrinkYLimit = containerTopY
        }
        if (this.justGrew) {
          if (containerTopY > 0) {
            this.justGrew = false
          }
        }
        if (this.compact) {
          if (containerTopY > this.shrinkYLimit) {
            this.compact = false
            this.justGrew = true
          }
        } else {
          if (!this.justGrew && containerTopY <= 0) {
            this.justShrank = true
            this.compact = true
          }
        }
      }
    },
    mouseenter () {
      this.compact = false
      this.hovering = true
    },
    mouseleave (event) {
      this.hovering = false
      this.handleScroll(event)
    },
    openSupportModal () {
      this.$modal.show('support-modal')
    }
  },
  filters: { yearTermFormat },
  mounted () {
    window.addEventListener("scroll", this.handleScroll)
  },
  beforeUnmount () {
    window.removeEventListener("scroll", this.handleScroll)
  }
}
</script>
<style scoped>
.header-container {
  display: grid;
  grid-template-columns: 1fr;
}

.header-container > * {
  grid-column: 1/2;
  grid-row: 1/2;
}

.applicant-details {
  display: grid;
  grid-template-columns: 3rem minmax(40vw, 2fr) minmax(20vw, 1fr) minmax(auto, 30vw) 2.5rem;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0.5rem;
  grid-template-areas:
  "star name additional actions bug"
  "star applicant additional actions bug";
}

.star {
  grid-area: star;
  align-self: center;
  padding: 0.75rem;
  cursor: pointer;
}

.name {
  grid-area: name;
  margin-bottom: 0;
  text-transform: initial;
}

.applicant { grid-area: applicant; }

.additional {
  grid-area: additional;
  padding: 0.5rem;
}

.actions {
  grid-area: actions;
  padding: 0.5rem;
}

.bug {
  grid-area: bug;
  margin-left: -0.5rem;
  place-self: center;
}

.scale-enter-active,
.scale-leave-active {
  transition: all 0.25s ease-out;
}

.scale-enter {
  opacity: 0;
  transform: scaleY(0.5) translateY(0.5rem);
}

.scale-leave-to {
  opacity: 0;
  transform: scaleY(0.5) translateY(-0.5rem);
}

</style>
