<template>
  <!-- placeholder div -->
  <div></div>
</template>

<script>
import moment from 'moment';
import RecoModal from '@/components/complex/RecoModal.vue';
import modalbuilders from '@/helpers/modalbuilders';
import animations from '@/animations';

export default {
  name: "RecoPostComposer",
  components: { RecoModal },
  props: {
    title: {
      type: String,
      default: ""
    },
    root: {
      type: Object,
    },
    me: {
      type: Object,
    },
    getTags: {
      type: Function,
    },
    addNewTag: {
      type: Function,
    },
    submitForumPost: {
      type: Function,
    },
    navigateBack: {
      type: Boolean
    }
  },
  data() {
    return {
      // output data
      motto: '',
      description: '',
      gender: {value: "all", display_name: "All"},
      age: {lower: 18, upper: 99},
      distance: {value: "infinite", display_name: "∞ km", meters: 100000000},
      location: null,
      activityLocation: null,
      // helpers
      responseSelectModal: null,
      forumPostDescriptionCreateModal: null,
      currentNav: null,
    }
  },
  watch: {
    navigateBack() {
      if(this.navigateBack) {
        if(this.currentNav != null) {
          this.$emit('navigatedBack');
          switch (this.currentNav) {
            case 'create-post-description':
              this.forumPostDescriptionCreateModal.dismiss();
              this.currentNav = null;
              this.root.isForumPostComposerModalOpen = false;
              break;
            default:
              break;
          }
        }
      }
    }
  },
  mounted() {
    this.openCreatePostDescription();
  },
  methods: {

    // create description
    openCreatePostDescription(triggeredBy) {
      this.currentNav = 'create-post-description';
      return modalbuilders.buildCreateForumPostDescription(this, {
        backButtonClicked: () => {
          this.forumPostDescriptionCreateModal.dismiss();
          this.root.isForumPostComposerModalOpen = false;
        },
        doneButtonClicked: () => {
          this.onSubmit();
        }
      });
    },

    // submit post
    onSubmit() {
      this.submitForumPost(this.getPost('post'));
      this.forumPostDescriptionCreateModal.dismiss();
      this.root.isForumPostComposerModalOpen = false;
    },

    // return post object
    getPost(type) {
      let post = {
        settings: {
          gender: this.gender,
          age: this.age,
          distance: this.distance,
        },
        attributes: {
          gender: this.me.gender,
          birthday: this.me.birthday,
          language: this.me.languages.post_language,
        },
        display: {
          user: { 
            uid: this.me.uid, 
            nickname: this.me.nickname, 
            avatar: this.me.avatar,
          },
          description: this.description,
          timestamp: Date.now(),
        },
        _meta: {
          location: this.me.location
        },
        timestamp: Date.now()
      }
      return post;
    },

  }
}
</script>

<style scoped lang="css">
  .loc-item {
    --border-color: rgba(0,0,0,0.2);
  }
  .loc-row {
    padding: 4px 0;
  }
  .loc-row-one-line {
    padding: 9px 0;
  }
  .loc-row-with-input {
    padding: 2px 0;
  }
  .loc-col {
    padding: 3px;
  }
  .placeholder {
    font-size: 16px;
    color: var(--reco-lighter-font-color);
  }
  .value {
    font-size: 16px;
    font-weight: 600;
  }
  .placeholder .secondary,
  .value .secondary {
    font-size: 13px;
    color: var(--reco-lighter-font-color);
  }
  .icon-container {
    display: inline-block;
    width: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 18px;
    color: #fff;
    background: red;
  }
  .icon-container.inline {
    margin: 10px 15px 10px 0;
  }
  .right-arrow {
    font-size: 26px;
    color: var(--reco-lighter-font-color);
  }
  .motto-input {
    width: 100%;
    line-height: 24px;
    font-size: 16px;
  }
  .description-input {
    width: 100%;
    line-height: 18px;
    resize: none;
    font-size: 16px;
  }
  .advanced-settings-button {
    font-size: 16px;
    color: var(--ion-color-primary);
  }
  .settings-grid {
    font-size: 14px;
  }
  .section-title {
    font-size: 16px;
    text-transform: uppercase;
    padding: 14px 0 10px 0;
  }
  .section-title.last {
    padding: 9px 0 10px 0;
  }
  .section-ul {
    padding-left: 20px;
    line-height: 26px;
    margin-top: 5px;
    width: 100%;
  }
  .edit-icon {
    position: relative;
    top: 1px;
    display: inline-block;
    margin-left: 3px;
    float: right;
  }
</style>