<template>
  <component
    :is="tag"
    class="quote-edit-item"
  >
    <TfBadge
      v-if="showNewBadge && item.is_new"
      value="New"
      status="success"
    />
    <p
      v-if="showEditor"
      data-test="carrier name"
    >
      <strong>{{ item.carrier_name }}</strong>
    </p>
    <p
      v-else
      data-test="responsible party for edit"
    >
      <strong>{{ responsibleParty }}</strong>
    </p>
    <p data-test="history product type name">
      {{ productTypeName }}
    </p>
    <p data-test="history attribute info">
      {{ attributeInfo }}
    </p>
    <p data-test="history from">
      From: {{ fromValue }}
    </p>
    <template v-if="attributeLink">
      <p>
        <RouterLink
          :to="attributeLink"
          data-test="to history update"
          v-text="`To: ${toValue}`"
        />
      </p>
      <p>
        <RouterLink
          :to="attributeLink"
          class="view-change-link"
          data-test="history change"
          v-text="'View Change'"
        />
      </p>
    </template>
    <p v-else>
      <strong data-test="history to">To: {{ toValue }}</strong>
    </p>
    <p
      v-if="showEditor"
      data-test="responsible party for edit"
    >
      Editor: {{ responsibleParty }}
    </p>
    <p>
      <span class="time">{{ $TF.DatesUtils.formatDateAndTime(item.last_created_at) }}</span>
    </p>
  </component>
</template>

<script>
  /**
   * A component used to display individual changes to a quote, including what the change was, who made it, and when.
   */
  export default {
    name: 'AppQuoteEditItem',
    props: {
      /**
       * what element this should appear as
       */
      tag: {
        type: String,
        default: 'li',
      },
      /**
       * overrides if we should show new badge or not
       */
      showNewBadge: {
        type: Boolean,
        default: true,
      },
      /**
       * the history item to display
       */
      item: {
        type: Object,
        required: true,
      },
      /**
       * route string to the page where the change was made
       */
      attributeLink: {
        type: String,
        default: '',
      },
      /**
       * Modifies the layout to by showing the carrier name and the editor instead of just the 'userName, carrierName'.
       */
      showEditor: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      /**
       * Combine the first/last name and prepend the carrier name if it exists.
       *
       * @returns {string}
       */
      responsibleParty() {
        const {
          broker,
          carrier,
          first_name: firstName,
          last_name: lastName,
        } = this.item.history_details.responsible_user;

        const userName = `${firstName} ${lastName}`;
        let responsibleCompany;

        if (broker && broker.name) {
          responsibleCompany = broker.name;
        }

        if (carrier && carrier.name) {
          responsibleCompany = carrier.name;
        }

        return `${userName}, ${responsibleCompany}`;
      },
      /**
       * Display product type if there's a label
       *
       * @returns {string}
       */
      productTypeName() {
        return this.item.product_type_name !== this.item.project_product_label
          ? `${this.item.product_type_name}, ${this.item.project_product_label}`
          : this.item.product_type_name;
      },
      /**
       * Display the attribute info including what product it belonged to
       * as well as container/value/subtype info.
       *
       * @returns {string}
       */
      attributeInfo() {
        const details = this.item.history_details;
        let attributeInfo = details.attribute_name;

        if (details.tier_subtype_name) {
          attributeInfo += `, ${details.tier_subtype_name}`;
        }

        if (this.item.attributable_id !== 77) {
          attributeInfo += ', ';

          if (details.container_type.toLowerCase() === 'class') {
            attributeInfo += 'Class ';
          }

          attributeInfo += `${details.container_name}`;
        }

        if (this.item.label && this.item.label !== 'composite') {
          attributeInfo += `, ${this.item.label}`;
        }

        return attributeInfo;
      },
      /**
       * The text to be displayed for what the item was changed from
       * If this is a Rate Attribute: Float to 3 decimal points and add $
       *
       * @returns {string}
       */
      fromValue() {
        const valueText = this.item.before_value || 'n/a';

        return this.isRateAttribute && this.item.before_value
          ? `$${parseFloat(valueText).toFixed(3)}`
          : valueText;
      },
      /**
       * Test to see if this is a attribute type of 'Rate Attribute'
       *
       * @returns {boolean}
       */
      isRateAttribute() {
        return this.item.attributable_type.toLowerCase() === 'rateattribute';
      },
      /**
       * The text to be displayed for what the item was changed to
       * If this is a Rate Attribute: Float to 3 decimal points and add $
       *
       * @returns {string}
       */
      toValue() {
        const valueText = this.item.after_value || 'n/a';

        return this.isRateAttribute && this.item.after_value
          ? `$${parseFloat(valueText).toFixed(3)}`
          : valueText;
      },
    },
  };
</script>

<style scoped>
.quote-edit-item {
  list-style: none;
  font-size: 14px;
  padding: 25px 16px;
  border-bottom: solid 1px var(--tf-gray-light-medium);
}

.time {
  color: var(--tf-gray);
}

.view-change-link {
  font-weight: normal;
}

p {
  margin: 0;
  padding: 2px 0;
}
</style>
