<template>
  <div class="chat--message-purchase">
    <div class="chat--message-purchase__title row">
      Congratulation
    </div>
    <div class="chat--message-purchase__successful row">
      <!-- Your purchase of Meditation and Happiness was successfull -->
      Your purchase of {{ product_name }} was successful
    </div>
    <div class="chat--message-purchase__notified row">
      <!-- We have notified Natasha and she will get in touch with you shortly to start your program. -->
      We have notified {{ provider_nickname }} and {{ provider_pronoun }} will get in touch with you shortly to start your program.
    </div>
    <!-- <MessageInfo :message=message /> -->
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Message } from './type';
import MessageInfo from './MessageInfo.vue';

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

  private product_info: any = { name: '', provider: {  nickname: '' }};

  get product_name() {
    if (!this.message) {
      return '';
    }
    return this.product_info.name;
  }
  get provider_nickname() {
    if (!this.message) {
      return '';
    }
    return this.product_info.provider.nickname;
  }
  
  get provider_gender() {
    return this.product_info.provider.gender || '';
  }

  get provider_pronoun() {
    if (this.provider_gender.length)
      return this.provider_gender.includes('f') ? 'she' : 'he';
    return 'coach';
  }

  public mounted() {
    try {
      this.product_info = JSON.parse(this.message.content || '').product;
      console.error('[Chat] Purchase message parsed', this.product_info);
    } catch (e) {
      console.error('[Chat] unable to parse purchase message content', this.message.content , e);
      this.product_info = {
              name: '',
              provider: {
                nickname: '',
              },
          };
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

.chat--message-purchase {
  display: block;
  width: 100%;
  background: linear-gradient(45deg, #00E0C1 0%, #AEEFAA 77%, #FBFFC1 100%);
  padding: 36px 20px 42px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  .row {
    width: 100%;
    color: #ffffff;
    padding-left: 10px;
    padding-right: 10px;
    letter-spacing: normal;

    &:not(:nth-child(1)) {
      border-top: 1px solid #ffffff;
    }
  }

  &__title {
    font-size: 28px;
    font-weight: 900;
    text-align: center;
    line-height: normal;
    padding-bottom: 31px;
  }
  &__successful {
    font-size: 19px;
    font-weight: bold;
    text-align: center;
    line-height: 1.53;
    padding-top: 14px;
    padding-bottom: 11px;
  }
  &__notified {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    line-height: 1.57;
    padding-top: 25px;
  }
}

</style>
