<!--
   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 :class="`flag-section-container border border-light`" :hidden="shouldHide">
    <div :class="`icon ${flagBg} text-white`">
      <font-awesome-icon :icon="flagIcon" />
    </div>
    <div class="header bg-light">{{title ? title : flag.name}}</div>
    <div class="action" v-if="!noModify">
      <button :class="btnClass" @click="flagModal">
        {{btnText}}
      </button>
    </div>
    <div v-if="hasSummary" class="summary">
      <slot name="summary"></slot>
    </div>
    <ExpandIndicator v-if="hasDetail" :collapsed="collapsed" @update:collapsed="changeCollapse" class="more" />
    <div v-show="hasDetail && !collapsed" class="detail">
      <slot></slot>
    </div>
  </div>
</span>
</template>
<script>
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
  import { faCheck, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
  import { mapGetters } from 'vuex'

  import ExpandIndicator from './ExpandIndicator'

  export default {
    name: 'DetailsFlagSection',
    components: { FontAwesomeIcon, ExpandIndicator },
    props: {
      'flagValue': { type: String },
      'flagType': { type: String },
      'title': { type: String },
      'noModify': { type: Boolean },
      'startExpanded': { type: Boolean, default: false },
      'flagDialogOptions': {
        type: Object,
        default() {
          return {}
        }
      },
      'flagActiveColor': { type: String },
      'flagInactiveColor': { type: String },
      'hideIfUnset': { type: Boolean }
    },
    data () {
      return {
        collapsed: !this.startExpanded
      }
    },
    computed: {
      ...mapGetters(['flagByValue']),
      flag () { return this.flagByValue(this.flagValue) },
      btnClass () {
        const set = this.flag.isSet
        const cleared = this.flag.isCleared
        return {
          'btn': true,
          'btn-sm': true,
          'btn-outline-secondary': !set,
          'btn-outline-danger': set && !cleared,
          'btn-outline-success': set && cleared
        }
      },
      btnText () {
        return this.flag.isActive ? 'clear flag' : 'set flag'
      },
      flagIcon () {
        return this.flag.isActive ? faExclamationTriangle : faCheck
      },
      flagBg () {
        const stateAware = this.flagActiveColor && this.flagInactiveColor
        if (!stateAware) return `bg-${this.flagType}`

        if (this.flag.isActive) return `bg-${this.flagActiveColor}`
        return `bg-${this.flagInactiveColor}`
      },
      hasSummary () {
        return !!this.$slots.summary
      },
      hasDetail () {
        return !!this.$slots.default
      },
      shouldHide () {
        return this.hideIfUnset && !this.flag.isSet
      }
    },
    methods: {
      flagModal() {
        const { flagDialogOptions } = this
        this.$modal.show('flag-modal', { ...flagDialogOptions, flag: this.flag })
      },
      changeCollapse (e) {
        if (e) {
          this.$emit('collapse')
        } else {
          this.$emit('expand')
        }
        this.collapsed = e
      }
    }
  }
</script>
<style scoped>
  .flag-section-container {
    display: grid;
    grid-template-columns: 3rem 7rem 1fr auto;
    grid-auto-rows: auto;
    grid-template-areas:
    "icon header header header"
    "icon action summary more"
    "icon detail detail detail";
    margin-bottom: 1rem;
    border-width: medium;
    border-style: solid;
  }
  .icon {
    grid-area: icon;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .action {
    grid-area: action;
    padding: 0.5rem;
  }
  .more {
    grid-area: more;
    padding: 0.5rem;
  }
  .header {
    grid-area: header;
    text-transform: uppercase;
    padding: 0.25rem;
    font-size: 0.8rem;
  }
  .summary {
    grid-area: summary;
    padding: 0.7rem;
  }
  .detail {
    grid-area: detail;
    padding: 0.7rem;
    border-top-color: #eee;
    border-top: thin solid var(--light, #333);
  }
  @media only screen and (max-width: 625px) {
    .flag-section-container {
      grid-template-columns: 2rem 1fr;
      grid-template-areas:
      "icon header"
      "icon action"
      "icon summary"
      "icon more"
      "icon detail";
    }
  }
</style>
