<template>
  <header
    :class="[
      'pdf-export-block',
      'pdf-export-header'
    ]"
  >
    <h1>{{ employerName }}</h1>
    <h2>{{ title }} as of {{ today }}</h2>
    <div
      v-if="showFilters"
      class="applied-filters"
    >
      <template v-for="filter in renderedFilters">
        <p
          v-if="filter.values.length"
          :key="filter.type"
        >
          <strong>{{ filter.type }}</strong>: {{ filter.values.join('; ') }}
        </p>
      </template>
    </div>
  </header>
</template>

<script>
  import moment from 'moment';

  /**
   * PdfExportHeader
   *
   * @vuedoc
   * @exports components/TfPdfExport/Header
   * @category Components
   */
  export default {
    name: 'TfPdfExportHeader',
    props: {
      employerName: {
        type: String,
        required: true,
        default: null,
      },
      filters: {
        type: Object,
        default: () => ({}),
      },
      title: {
        type: String,
        required: true,
        default: null,
      },
    },

    computed: {
      /**
       * Generates today's date for template.
       *
       * @returns {string}
       */
      today() {
        return moment().format('MM/DD/YYYY');
      },

      /**
       * Converts the filter object to array of objects with { type, values }.
       *
       * @returns {Array}
       */
      renderedFilters() {
        return Object.keys(this.filters).map((type) => ({
          type,
          values: this.filters[type],
        }));
      },

      /**
       * Looks for any of the filters in renderedFilters to see if they have length.
       *
       * @returns {boolean}
       */
      showFilters() {
        return this.renderedFilters.length
          && this.renderedFilters.some((filter) => filter.values.length);
      },
    },
  };
</script>

<style lang="scss" scoped>
@import 'src/assets/styles/variables';

header {
  border-bottom: 2px tf-light-gray solid;
  padding-bottom: 20px;
  text-align: left;
  width: calc(100% - 80px);
}

h1,
h2 {
  font-weight: bold;
  color: $tf-black;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 16px;
}

.applied-filters {
  background: $tf-extra-light-gray-1;
  color: $tf-black;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 18px;

  strong {
    text-transform: capitalize;
  }
}
</style>
