import {get, trim} from 'lodash';
import {createNamespacedHelpers} from 'vuex';

import YAS from 'utils/yas-constants';

const {mapActions: articleMapActions, mapMutations: articleMapMutations, mapState: articleMapState} = createNamespacedHelpers('article');
const {mapActions: commentMapActions} = createNamespacedHelpers('comment');

export default {
  name: 'CommentPlaceholder',
  props: {
    tag: String,
    destId: Number,
    addType: Number,
    columnType: {
      type: Number,
      default: 1001
    },
    user: {
      type: String,
      default: ''
    },
    share: Boolean,
    posId: Number,
    articleId: Number,
    rootId: Number,
    autoUpdate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      posting: false
    };
  },
  computed: {
    ...articleMapState(['comentInputVisable'])
  },
  watch: {
    comentInputVisable: function() {
      if (this.comentInputVisable ?? false) {
        this.openComentInput();
        this.INIT_COMENT_INPUT?.();
      }
    }
  },
  methods: {
    ...commentMapActions(['postComment']),
    ...articleMapActions(['fetchArticleUpdate']),
    ...articleMapMutations(['UPDATE_ARTICLE_COMMENT_COUNT', 'INIT_COMENT_INPUT']),
    async openComentInput() {
      if (this.share) {
        return this.$links.toDownloadApp();
      }
      const user = await this.$sdk.getUser();

      if (user && user.uid) {
        const hint = this.user ? `回复 ${this.user}:` : '写评论...';

        if (this.$yoho.isYohoBuy) {
          this.$yoho.getInput({hint}, (content) => {
            this.comment(content);
          }, (e) => {
            console.error(e);
          });
        } else if (process.env.NODE_ENV !== 'production') {
          this.$createDialog({
            type: 'prompt',
            title: '测试-输入',
            prompt: {
              placeholder: hint
            },
            onConfirm: (e, promptValue) => {
              this.comment(promptValue);
            }
          }).show();
        } else {
          return this.$links.toDownloadApp();
        }
      } else {
        this.$sdk.goLogin();
      }
    },
    async comment(content) {
      content = trim(content);

      if (!content) {
        this.$createToast({
          txt: '请输入评论内容',
          type: 'warn',
          time: 1000
        }).show();
        return;
      }

      if (this.posting) {
        return;
      }
      this.posting = true;
      const result = await this.postComment({
        content: content,
        destId: this.addType === 0 ? this.destId : void 0,
        commentId: this.addType === 1 ? this.destId : void 0,
        addType: this.addType,
        columnType: this.columnType
      });

      this.posting = false;

      let toastInfo = {
        txt: '评论成功',
        type: 'success',
        time: 1000
      };

      if (result.code === 200) {
        this.UPDATE_ARTICLE_COMMENT_COUNT({articleId: this.articleId});

        if (this.autoUpdate && this.addType === 0) {
          await this.fetchArticleUpdate({articleId: this.articleId});
        }

        this.$emit('on-comment', {
          destId: this.destId,
          parentId: this.rootId || void 0,
          addType: this.addType,
          columnType: this.columnType,
          comment: {
            content,
            destId: get(result, 'data', ''),
            columnType: this.columnType,
            parentId: this.addType === 1 ? this.destId : void 0,
            rootId: this.rootId || void 0
          }
        });

        this.reportComment(this.destId);
      } else {
        Object.assign(toastInfo, {
          txt: result.message || '服务器开小差了',
          type: 'warn',
        });
      }

      this.$createToast(toastInfo).show();
    },
    reportComment(comId) {
      this.$store.dispatch('reportYas', {
        params: {
          appop: YAS.eventName.comment,
          param: {
            POS_ID: this.posId,
            ARTICLE_ID: this.articleId,
            COM_ID: this.addType === 1 ? comId : void 0
          }
        }
      });
    }
  },
  render(h) {
    return h(this.tag || 'div', {
      on: {
        click: () => {
          this.openComentInput();
        }
      }
    }, this.$slots.default);
  }
};