<template>
  <reco-modal 
  v-on:backButtonClicked="backButtonClicked" 
  :withBackButton="true" 
  :withDoneButton="false"
  :title="'Profile'">
    <ion-content slot="content" v-if="username && username.length">

      
      <ion-item class="bottom-item bio" lines="none">
          <div slot="start">
            <ion-avatar class="loc-avatar" >
              <img :src="avatar" style="background: #10dc60" />
            </ion-avatar>  
          </div>
          
          <div class="loc-name-and-stars">
            <div 
                class="loc-name" 
                @click="$emit('userClicked', post.user)"
              >{{username && username.length ? username : '...'}}
            </div>

            <div class="loc-status-row">
              <span @click="profilePost && profilePost.bookmarked ? onBookmarkToggle(profilePost) : null">                    
                <font-awesome-icon v-if="profilePost && profilePost.bookmarked && profilePost.bookmarked.includes(me.uid)" :icon="['fas', 'star']" class="loc-star-icon-active"/>
                <font-awesome-icon v-else :icon="['fas', 'star']" class="loc-star-icon"/>
              </span>
              <span class="loc-starred-count">{{postStarCount}}</span>

              <!-- <span class="loc-platinum">
                <b-icon class="loc-platinum-icon" icon="hexagon-fill"/>
                <span class="loc-starred-count">100</span>
              </span> -->

            </div>
          </div>
          
          
          <b-icon slot="end" icon="three-dots" class="more-button" @click="openActionSheet()"  />
          
        
          <!-- <div class="achievements" v-if="userAchievements">
            <span class="achievement-container" :style="!userAchievements.bronze ? 'opacity:0;' : ''">
              <b-icon-award-fill class="achievement-medal" :style="'color:'+achievementColors.bronze" />
              <span class="achievement-value" :class="{ 'two-digit': userAchievements.bronze > 9 }">{{ userAchievements.bronze ? userAchievements.bronze : '' }}</span>
            </span>
            <span class="achievement-container" :style="!userAchievements.silver ? 'opacity:0;' : ''">
              <b-icon-award-fill class="achievement-medal" :style="'color:'+achievementColors.silver" />
              <span class="achievement-value" :class="{ 'two-digit': userAchievements.silver > 9 }">{{ userAchievements.silver ? userAchievements.silver : '' }}</span>
            </span>
          </div> -->
      </ion-item>

      <ion-slides 
					v-if="avatar" 
					pager="true" 
					ref="slider"
					:options="sliderOpts"
					class="loc-slides"					
					v-on:ionSlideTap="slideTapped($event)"
					v-on:ionSlideDidChange="setSliderActiveIndex()">
					<ion-slide v-for="(image, idx) in galleryImgs" :key="idx">						
						<img :src="image" />
					</ion-slide>
			</ion-slides>

      

      <ion-item  lines="none" v-if="forumBio || bio">
        <p v-html="forumBio ? forumBio : bio"  style="margin: 0;"/>
      </ion-item>
      
      <ion-item lines="none" style="margin-top: 10px;" v-if="!isBusiness">
        <div class="loc-personal-info">
          <span
            v-if="height > -1"
            class="loc-label"
            style="margin-right: 7px;">
            Height: <span class="loc-value">{{height}}</span>
          </span>
          <span 
            v-if="weight > -1"
            class="loc-label">
            Weight: <span class="loc-value">{{weight}}</span>
          </span>
          <div 
            v-if="occupation && occupation.length > 0"
            class="loc-label">
            Occupation: <span class="loc-value">{{occupation}}</span>
          </div>
          <div 
            v-if="numOfChildren > -1"
            class="loc-label">
            Number of Children: <span class="loc-value">{{numOfChildren}}</span>
          </div>
          <div 
            v-if="pets && (pets.cat || pets.dog || pets.other)"
            class="loc-label">
            Pets: <span v-if="pets.cat" class="loc-value">🐱 cat(s)</span> 
                  <span v-if="pets.dog" class="loc-value">🐶 dog(s)</span> 
                  <span v-if="pets.other" class="loc-value">🐾 other</span>
          </div>
          <div
            class="loc-value"
            v-if="smoker">I'm a smoker 🚬</div>
        </div>
      </ion-item>

      <ion-item lines="full">
        
        <!-- Message Button if you came from a forum -->
        <div v-if="!isMe" class="message-button" @click="onProfileChatNowClicked(uid)">
          <div class="msg-btn-text">
          <ion-icon name="chatbubbles" class="loc-chatnow-icon"></ion-icon>
          Chat Now</div>
        </div>

       
        <!-- <div v-if="!isMe && !recoDate" class="follow-button" @click="toggleFollow()">
          {{!isFollowed ? 'Follow' : 'Unfollow'}}
        </div> -->
        <div v-else-if="isMe" class="follow-button" @click="editProfileButtonClicked()">
          <ion-icon slot="start" name="create" ios="md-create" md="md-create" ></ion-icon> Edit Profile
        </div>

      </ion-item>

      <div v-for="post in validPosts" :key="post.id">
        <reco-post :post="post" :me="me" :following="following" v-on:userClicked="userClicked($event)" v-on:toggleFollow="toggleFollow()"
        :excludedFeatures="['border', 'follow']"
        v-on:deleteButtonClicked="deletePostAlert($event)"
        v-on:bookmarkToggle="onBookmarkToggle($event)" 
        v-on:editButtonClicked="onEditButtonClick($event)"/>
        <ion-item-divider class="loc-divider"></ion-item-divider>
      </div>
      <reco-placeholder v-if="posts.length < 1 && !loading" icon="albums" :text="username + ' hasn\'t posted yet.'" />
    </ion-content>
  </reco-modal>
</template>

<script>
import RecoModal from '@/components/complex/RecoModal.vue';
import RecoPost from '@/components/complex/RecoPost.vue';
import RecoPlaceholder from '@/components/atomic/RecoPlaceholder.vue';
import { BIconAwardFill } from 'bootstrap-vue';
import moment from 'moment';

export default {
  name: 'RecoProfileModal',
  components: {
    RecoModal, RecoPost, RecoPlaceholder, BIconAwardFill
  },
  props: {
    achievementColors: {
      type: Object,
      default: { silver: '#B6C2CC', bronze: '#CD8032' }
    },
    forumBio: {
      type: String,
      default: null
    },
    recoDate:{
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      name: "",
      username: "",
      avatar: "",
      bio: "",
      userAchievements: null,
      isFollowed: false,
      isMe: false,
      isNameVisible: false,
      posts: [],
      following: [],
      me: null,
      loading: true,
      sliderOpts: {
        zoom: {
          maxRatio: 3,
          toggle: true,
        },
        initialSlide: 1, 
        speed: 400
      },
      galleryImgs: []
    };
  },
  mounted() {
    let self = this;
    setTimeout(() => self.loading = false, 2000);
  },
  computed:{
    validPosts(){
    //   let validPosts = [];
    //   let now = moment().unix();
    //   this.posts.forEach(post => {
    //     if(post.expiration && post.expiration > now){
    //       validPosts.push(post);
    //     }
    //   });
    //   return validPosts;
    const withoutProfilePost = this.posts.filter(post => post.id !== this.profilePostId);   
    return withoutProfilePost;
    },

    postStarCount(){
      let starCount = 0;
      this.posts.forEach(post => {
        starCount += post.bookmarked.length;
      });
      return starCount;
    },
    profilePost(){
      const profilePost = this.posts.filter(post => post.id === this.profilePostId);
      if(profilePost.length > 0){
        return profilePost[0];
      }
      return null;
    }
  },
  methods:{
    slideTapped($event) {
      $event.target.swiper.zoom.toggle();			 
    },

		setSliderActiveIndex() {
			this.showSlideDelBtn = false;
      this.$refs.slider.getActiveIndex().then((index) => {
			  this.currentSlideIndex = index;});
    },
    openActionSheet() {
      const buttons = [{
        text: 'Report User',
        role: 'none',
        handler: () => {
          this.openReportModal();
        }
      },
      ];
      if(!this.isMe){
        if(this.me.blockedUsers && this.me.blockedUsers.includes(this.uid)){
          buttons.push({
            text: 'Unblock User',
            role: 'none',
            handler: () => {
              this.toggleBlockUser(this.uid);
            }
          });
        }
        else{
          buttons.push({
            text: 'Block User',
            role: 'none',
            handler: () => {
              this.toggleBlockUser(this.uid);
            }
          });
        }      
      }

      const favText = this.profilePost && this.profilePost.bookmarked.includes(this.me.uid) ? "Remove Favorite" : "Add Favorite";
      const favButton = {
          text: favText,
          role: 'none',
          handler: () =>{
            this.onBookmarkToggle(this.profilePost);
          }
        };
      if(this.profilePost){
        buttons.unshift(favButton);
      }
      
      return this.$ionic.actionSheetController
        .create({ buttons })
        .then(a => a.present())
    },
    openReportModal() {
      return this.$ionic.alertController
        .create({
          header: 'Checkbox',
          inputs: [
            { type: 'checkbox', label: 'Racist', value: 'racist' },
            { type: 'checkbox', label: 'Abusive', value: 'abusive' },
            { type: 'checkbox', label: 'Aggressive', value: 'aggressive' },
            { type: 'checkbox', label: 'Spam', value: 'spam' },
            { type: 'checkbox', label: 'Other', value: 'other' },
          ],
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel',
              cssClass: 'secondary',
            },
            {
              text: 'Report',
              handler: response => {
                this.onReportUser({uid: this.uid, reason: response});
              },
            },
          ],
        })
        .then(a => a.present())
    },   
  }
}
</script>
<style scoped lang="css">
  .header {
    margin-top: 10px;
    --padding-start: 10px;
    --padding-end: 0px;
  }
  .user-names .username {
    font-weight: 600;
  }
  .user-names .name {
    font-size: 14px;
    color: var(--reco-light-font-color);
  }
  .bio {
    font-size: 15px;
    line-height: 22px;
    padding-top: 6px;
    --padding-start: 10px;
    --padding-end: 0px;
  }
  .bottom-item {
    --padding-bottom: 15px;
  }
  .loc-divider {
    z-index: -10;
    line-height: 5px !important;
    padding: 0px;
    min-height: 12px;
    border-top: 0px solid #ccc;
    border-bottom: 0px solid #ccc;
    background-color: #fff;
  }
  .loc-divider.first {
    border-bottom: 0px solid #ccc;
  }
  .profile-picture{
    width: 50px;
    height: 50px;
  }
  .loc-avatar {
    position: absolute;
    width: 46px;
    height: 46px;
    left: 10px;
    top: 5px;
  }
  .follow-button {
    margin-right: 10px;
    color: #fff;
    width: 100%;
    line-height: 32px;
    font-weight: bold;
    font-size: 16px;
    border-radius: 10px;
    background: var(--actiways-primary-color);
    text-align: center;
    margin-top: 2vh;
    margin-bottom: 3vh;

  }

   .message-button {
    margin: 10px;
    width: 100%;
    line-height: 32px;
    border-radius: 10px;
    background: var(--actiways-primary-color);
    text-align: center;
  }
  .msg-btn-text{
    position: relative;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
  }

  .achievements {
    width:60px;
    display:flex;
    justify-content: space-between;
    margin-left:-4px;
  }
  .achievement-container {
    text-align: center;
  }
  .achievement-medal {
    font-size:26px;
  }
  .achievement-value {
    position: relative;
    color:#fff;
    font-weight: bold;
    margin-left:-17px;
    top:-10px;
    font-size:15px;
  }
  .achievement-value.two-digit {
    font-size:12px;
    margin-left:-20px;
    top:-12px;
  }

.loc-label{
	  margin-right: 0px;
    padding: 2px;
  	color: var(--reco-lighter-font-color);    
}
.loc-value{
  color: black;
  padding: 2px;
}
.loc-slides {
	position: relative;
	z-index: 11;
	background-color: #fff;
	width: 100%;
	max-height: 400px;
  margin-bottom: 10px;
	--bullet-background: var(--actiways-primary-color);
  --bullet-background-active: var(--actiways-primary-color);
}
.loc-star-icon{
  width: 16px;
  height: 16px;
}
.loc-star-icon-active{
  color: #ffcc6f;
  width: 16px;
  height: 16px;
}
.loc-starred-count{
  font-size: 12px;
  color: var(--reco-lighter-font-color);
  margin-left: 2px;
}
.loc-status-row{
  margin-left: 40px;  
  margin-top: -5px;
  line-height: 30px;
}
.more-button{
  float: right;  
  margin: 5px 10px 5px 5px;
  width: 30px;
  margin-left: 5px;
  height: 30px;
}
.loc-personal-info{
  font-size: 15px;
}
.loc-name {
  display: inline-block;
  margin-left: 40px;

  font-weight: bold;
  font-size: 15px;
}
.loc-chatnow-icon{
  position: relative;
  font-size: 20px; 
  top: 4px;
}
.loc-name-and-stars{
  position: relative;
  top: 4px;
}
.loc-platinum-icon{
  color: #A9A9A9;
  height: 16px;
  width: 16px;
  position: relative;
  top: 2px;
  /* filter:drop-shadow(1px 1px 1px #D3D3D3); */
}
.loc-platinum{
  margin-left: 10px;
}

</style>