<template>
  <table class="rfp-table">
    <template v-for="dataInfo in tableData">
      <tr
        v-if="!ignoreRows.includes(dataInfo.type)"
        :key="dataInfo.text"
        :data-test="`rfp ${dataInfo.type} information`"
      >
        <td
          :style="{ width: `${labelCellWidth}px` }"
          v-text="dataInfo.text"
        />
        <td>
          <!-- Format Due date && Edit link -->
          <template v-if="dataInfo.type === 'project_due_date'">
            {{ info[dataInfo.type] !== 'Due Date Not Specified'
              ? $TF.DatesUtils.formatSimpleDate(info.project_due_date)
              : noValueText
            }}
            <RouterLink
              v-if="editLink.name"
              :to="editLink"
              class="link-edit"
              v-text="'Edit'"
            />
          </template>
          <!--
            Formatted Cover Memo
            Disable no-html since these are paragraphs
          -->
          <!-- eslint-disable vue/no-v-html -->
          <span
            v-else-if="dataInfo.type === 'rfp_cover_memo' && info.rfp_cover_memo"
            v-html="info.rfp_cover_memo.replace(/(?:\r\n|\r|\n)/g, '<br>')"
          />
          <!-- eslint-enable vue/no-v-html -->
          <!-- Employer Website -->
          <a
            v-else-if="dataInfo.type === 'employer_website' && info.employer_website"
            target="_blank"
            :href="info.employer_website"
            v-text="info.employer_website.replace(/^https?:\/\//, '').replace(/\/+$/, '')"
          />
          <!-- Formatted Effective Date -->
          <template v-else-if="dataInfo.type === 'effective_date' && info.effective_date">
            {{ $TF.DatesUtils.formatSimpleDate(info.effective_date) }}
          </template>
          <!-- Also display Open Enrollment Strategy if Open Enrollment is Yes -->
          <template
            v-else-if="dataInfo.type === 'open_enrollment_this_year'
              && formatOpenEnrollment.thisYear
            "
          >
            {{ info.open_enrollment_this_year }}
            {{ formatOpenEnrollment.enrollmentStrategy }}
          </template>
          <!-- Show the value of row or noValueText  -->
          <template v-else>
            {{ info[dataInfo.type] || noValueText }}
          </template>
        </td>
      </tr>
    </template>
    <tr v-if="showDocuments">
      <td>Documents</td>
      <td>
        {{ info.inforce_sources_message }}
        <p v-if="documentManagerLink.name">
          <RouterLink
            :to="documentManagerLink"
            v-text="'Document manager'"
          />
        </p>
      </td>
    </tr>
  </table>
</template>

<script>
  /**
   * Component used for displaying the meta data information regarding an RFP throughout our applications.
   *
   * @vuedoc
   * @exports RfpTable
   * @category components
   */
  export default {
    name: 'RfpTable',
    props: {
      documentManagerLink: {
        type: Object,
        default: () => ({}),
      },
      editLink: {
        type: Object,
        default: () => ({}),
      },
      info: {
        type: Object,
        default: () => ({}),
      },
      hasStopLoss: {
        type: Boolean,
        default: false,
      },
      /**
       * Array of parameters to not render in the table.
       */
      hideParams: {
        type: Array,
        default: () => [],
      },
      labelCellWidth: {
        type: Number,
        default: 172,
      },
      projectType: {
        type: String,
        required: true,
      },
      showDocuments: {
        type: Boolean,
        default: false,
      },
    },
    data: (vm) => ({
      noValueText: 'Not provided',
      tableData: [
        { type: 'employer_name', text: 'Employer' },
        { type: 'employer_location', text: 'Employer location' },
        { type: 'employer_website', text: 'Employer website' },
        { type: 'employer_total_lives', text: 'Lives' },
        { type: 'employer_sic', text: 'SIC' },
        { type: 'products', text: 'Products & broker commissions' },
        { type: 'incumbent_carriers', text: 'Incumbents' },
        { type: 'broker_of_record_label', text: 'Broker of record' },
        {
          type: 'broker_contacts',
          // Backwards compatible fix. Until Broker team features are
          // added to Core API, this row should remain "Primary contacts"
          // can see "Broker team contacts" on Features 2 until then
          // TODO: [SHARED-156] remove Primary in favor for Broker team after feature is merged to staging -kc
          text: vm.info.event_contacts
            ? 'Broker team contacts'
            : 'Primary contacts',
        },
        { type: 'event_contacts', text: 'Placement event contacts' },
        { type: 'stop_loss_tpa_company', text: 'Medical claim administrator' },
        { type: 'stop_loss_rx_vendor', text: 'Prescription drug administrator' },
        { type: 'stop_loss_transplant_carrier', text: 'Fully insured transplant carrier' },
        { type: 'reason_for_rfp', text: 'Reason for marketing' },
        { type: 'benefit_administrator', text: 'Benefit admin' },
        { type: 'open_enrollment_this_year', text: 'Open enrollment' },
        { type: 'hdhp', text: 'High deductible health plan' },
        { type: 'market_activity', text: 'Market activity' },
        { type: 'effective_date', text: 'Coverage effective date' },
        { type: 'project_due_date', text: 'Due date' },
        { type: 'rfp_cover_memo', text: 'Cover memo' },
      ],
    }),
    computed: {
      /**
       * If this project has a Stop Loss Product, we filter out certain rows if there was no data when the RFP was created.
       *
       * @returns {Array}
       */
      ignoreRows() {
        const generalData = ['rfp_cover_memo'];
        const stopLossData = ['stop_loss_tpa_company', 'stop_loss_rx_vendor', 'stop_loss_transplant_carrier'];

        if (this.hasStopLoss) {
          generalData.push(...stopLossData);
        }

        const rowsToIgnore = generalData.filter((type) => (
          this.info[type] && this.info[type].match(/not provided/i)
        ));

        // if project is Initial Employer Build, we don't want to show broker_contacts row at all.
        /**
         * the second condition is meant to make event_contacts backwards compatible with the current core_api as
         * it does not have this particular property in rfp_info yet. so we hide it regardless of project type.
         * We can remove the second condition at any time after the work in features 2 for the new broker team
         * feature is added to staging. -kc
         * TODO: remove second condition once broker team feature is merged into staging -kc
         */
        if (
          this.$TF.ReusableData.projectTypes.isBuildType(this.projectType)
          || !this.info.event_contacts
        ) {
          rowsToIgnore.push('event_contacts');
        }

        if (this.hideParams.length) {
          rowsToIgnore.push(...this.hideParams);
        }

        return rowsToIgnore;
      },
      /**
       * Identify if this project is in Open Enrollment and surround Enrollment Strategy in parenthesis if it exists
       *
       * @returns {object}
       */
      formatOpenEnrollment() {
        return {
          // Ensure that the open enrollment year is 'yes' and not empty as an extra check to accomodate Cover Memo e2e test
          thisYear: this.info.open_enrollment_this_year
            && this.info.open_enrollment_this_year.toLowerCase() === 'yes',
          enrollmentStrategy: this.info.open_enrollment_strategy
            ? `(${this.info.open_enrollment_strategy})` : '',
        };
      },

    },
  };
</script>

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

  .rfp-table {
    width: 100%;
    margin-bottom: 28px;
  }

  td {
    padding: 13px;
    border: 1px $tf-light-gray solid;
    background: $tf-white;
    vertical-align: top;
  }

  .link-edit {
    margin-left: 15px;
  }
</style>
