<template>
  <div class="chat--message-offer">
    <div class="chat--message-offer__title row">
      You have {{ $root.isUserProvider ? 'sent' : 'received'}} an offer:
    </div>
    <!-- <be-header-image :service="product"/> -->
    <div class="chat--message-offer__details row">
      <!-- {{ offer_info }} -->
      <div class="chat--message-offer__details-name">{{ offer_info.name }}</div>
      <div class="chat--message-offer__details-description" style="white-space: pre-line">{{ offer_info.description }}</div>
      <!-- <div class="chat--message-offer__details-price"> $ {{ offer_info.price }}</div> -->
    </div>
    <div class="chat--message-offer__action row" v-if="!$root.isUserProvider">
      <a :href="purchaseLink"
        class="router-link">
        <input class="purchase-button" type="button" :value="(offer_info.price == 0 ? 'Get for FREE' : 'Purchase for ' + offer_info.currency + ' ' + offer_info.price)"/>
      </a>
    </div>
    <div class="chat--message-offer__details-price primary"
      v-else> {{ offer_info.price == 0 ? 'FREE' : offer_info.currency + ' ' + offer_info.price }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Message } from './type';
import MessageInfo from './MessageInfo.vue';
import { ChatApi, ProductApi } from '@apsel/apsel-api-ts-axios';
import ChatEngine from './ChatEngine';

@Component({
  components: {
    MessageInfo,
  },
})
export default class MessageOffer extends Vue {
  @Prop() private message!: Message;

  // private offer_info: any = { };
  private product: any = {};
  private saving: Boolean = false;
  private statusMessage: any = '';

  // get product_name() {
  //   if (!this.message) {
  //     return '';
  //   }
  //   return this.offer_info.name;
  // }
  // get provider_nickname() {
  //   if (!this.message) {
  //     return '';
  //   }
  //   return this.offer_info.provider.nickname;
  // }

  get purchaseLink(): any {
    if (this.offer_info.id) {
      return `/purchase/${this.offer_info.productId}/${this.offer_info.packageId}/${this.offer_info.id}`;
    } else {
      return `/purchase/${this.offer_info.productId}/${this.offer_info.packageId}`;
    }
   //  return `/purchase/${this.offer_info.productId}/${this.offer_info.packageId}/${this.message.id}/${(window.location.pathname.split('/'))[2]}`;
  }

  get offer_info(): any {
    console.error('[Chat] Offer message parsed', JSON.parse(this.message.content || '{}'));
    return JSON.parse(this.message.content || '{}');
  }

  public purchase_offer() {
    // console.error('offer id', this.offer_info.id);
    this.$root.$router.push(this.purchaseLink);
  }

  public mounted() {
    // try {
    //   this.offer_info = JSON.parse(this.message.content || '') || {};
    //   console.error('[Chat] Offer message parsed', this.offer_info);
    //   // this.product = this.getProduct(this.offer_info.product);
      
    // } catch (e) {
    //   console.error('[Chat] unable to parse offer message content', this.message.content , e);
    //   this.offer_info = {};
    // }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import './chat.scss';

.chat--message-offer {
  &__title {
    color: $primary;
    font-style: italic;
    font-weight: bold;
    margin-bottom: 30px;
  }

  &__details {
    &-name {
      font-size: larger;
      font-weight: bold;
    }
    &-description {
      margin: 10px 0;
    }
    &-price {
      font-weight: bold;
    }
  }

  .purchase-button {
    width: 100%;
    color: white;
    background-color: $primary;
    border-radius: 2px;
    padding: 2px 5px;
    cursor: pointer;
  }
}

</style>
