<template>
  <f7-page>
    <f7-navbar
      back-link="Back"
      :title="user_details[0].name"
      :subtitle="user_details[0].location"
    >
      <div slot="default">
        <span :v-if="user_details[0].birthDate">{{
          moment(user_details[0].birthDate, "YYYYMMDD").fromNow(true)
        }}</span>
      </div>
    </f7-navbar>

    
    <f7-block>
      <div class="wrapper">
        <img class="image--cover1" :src="this.user_details[0].photo_url1" />
      </div>
      <div class="wrapper">
        <p>
          <b>Profile Message</b>
          <br />
          {{ user_details[0].profileMessage }}
        </p>
      </div>

       <f7-row no-gap align="center">
            <f7-col><b>Fans</b><br>{{nFormatter(user_details[0].fans)}}</f7-col>
            <f7-col><b>Following</b> <br>{{user_details[0].following}}</f7-col>
            <f7-col><b>Philanthropy</b> <br>{{ nFormatter(user_details[0].gift_out)}}</f7-col>
            <f7-col><b>Treasure</b> <br>{{ nFormatter(user_details[0].wallet_backup) }}</f7-col>
          </f7-row>
          <br>
          <br>
 
      <div class="wrapper">
        <p>
          <b>Your Email</b>
          <br />
          {{ this.user_details[0].email }} --> Only you see this
        </p>
      </div>
      <div class="wrapper">
        <p>
          <b>Your Phone Number</b>
          <br />
          {{ this.user_details[0].phonenumber }} --> Only you see this
        </p>
      </div>
      <div class="wrapper">
        <p>
          <b>PayPal (Gifts Payment)</b>
          <br />
          {{ this.user_details[0].payment_method }} <f7-link @click="editPaymentMethod()">
              <i class="f7-icons size-29 color-icon-red">pencil</i>
            </f7-link>
        </p>
      </div>
      <br />
      <br />
    </f7-block>
  </f7-page>
</template>

<script>
var numeral = require("numeral");

export default {
  data() {
    return {
      //user_details: null
      userEmail: null,
    };
  },

  methods: {

    editPaymentMethod(){
      var dialog = this.$f7.dialog
        .create({
          title: "Enter New PayPal Email",
          text: "",
          content:
            '<div class="dialog-input-field item-input"><div class="item-input-wrap"><input class="dialog-input" type="text" placeholder="Enter Your New PayPal Email" maxlength="100"></div></div>',

          buttons: [{ text: "Cancel", close: true }, { text: "Ok" }],
          onClick: (dialog, index) => {
            //console.log("nosa");
            //console.log(dialog.$el.find(".dialog-input").val());
            var response = dialog.$el.find(".dialog-input").val().trim();
            if (response.length > 0) {
              var payload = {};
              payload.paypal = response;
              payload.email = this.user[0].email;
              payload.domain = this.user[0].domain;
              this.$store.dispatch("editPayPal", payload);
              this.$f7.dialog.close();
            } else {
              //console.log("index", index);
              if (index == 1) {
                this.$store.commit(
                  "setAlertMessage",
                  "Empty Message is not allowed"
                );
              }
            }
          },
          on: {
            open: function () {
              console.log("OPEN");
            },
          },
        })
        .open();
    },

    nFormatter(num) {
     if (num >= 1000000000) {
        return (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'G';
     }
     if (num >= 1000000) {
        return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
     }
     if (num >= 1000) {
        return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
     }
     return num;
},


    formatNumber(value) {
      return numeral(value).format("0,0.00"); // displaying other groupings/separators is possible, look at the docs
    },
  },

  computed: {
    photoStatus() {
      return this.$store.getters.photoStatus;
    },
    user() {
      return this.$store.getters.user;
    },

    user_payout: {
      get: function () {
        return this.formatNumber(this.$store.getters.user_payout);
      },
      set: function (newValue) {
        this.$store.commit("setUserLocation", newValue);
      },
    },
    user_country() {
      return this.$store.getters.user_country;
    },
    subscribe_affiliate() {
      return this.$store.getters.subscribe_affiliate;
    },
    user_details() {
      return this.$store.getters.user_details;
    },
  },
  watch: {},

  async created() {},
};
</script>
<style scoped>
.small-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.size-29 {
  font-size: 10px;
}

.color-icon-red {
  color: #4cd964;
}
.color-lightgrey {
  color: #d3d3d3;
}

/* Custom color theme */
:root {
  --f7-theme-color: #42a5f5;
  --f7-theme-color-rgb: 66, 165, 245;
  --f7-theme-color-shade: #1b93f3;
  --f7-theme-color-tint: #69b7f7;
}
/* Invert navigation bars to fill style */
:root,
:root.theme-dark,
:root .theme-dark {
  --f7-bars-bg-color: var(--f7-theme-color);
  --f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
  --f7-bars-translucent-opacity: 0.9;
  --f7-bars-text-color: #fff;
  --f7-bars-link-color: #fff;
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
  --f7-bars-border-color: transparent;
  --f7-tabbar-link-active-color: #fff;
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
  --f7-sheet-border-color: transparent;
  --f7-tabbar-link-active-border-color: #fff;
}
.appbar,
.navbar,
.toolbar,
.subnavbar,
.calendar-header,
.calendar-footer {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  --f7-link-highlight-color: var(--f7-link-highlight-white);
  --f7-button-text-color: #fff;
  --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
}
.navbar-large-transparent,
.navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #000;

  --r: 66;
  --g: 165;
  --b: 245;
  --progress: var(--f7-navbar-large-collapse-progress);
  --f7-bars-link-color: rgb(
    calc(var(--r) + (255 - var(--r)) * var(--progress)),
    calc(var(--g) + (255 - var(--g)) * var(--progress)),
    calc(var(--b) + (255 - var(--b)) * var(--progress))
  );
}
.theme-dark .navbar-large-transparent,
.theme-dark .navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #fff;
}

.small-avatar2 {
  width: 50px;
  height: 50px;
  margin: 20px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.wrapper {
  text-align: center;
}

.image--cover1 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 5px;
  object-fit: cover;
  object-position: center;
}

.size-29 {
  font-size: 18px;
}

.size-12 {
  font-size: 12px;
}
.color-icon-red {
  color: #42a5f5;
}
.color-lightgrey {
  color: #d3d3d3;
}

</style>