import * as Types from './types';
import {getArticleImageSize} from 'utils/image-handler';
import { get } from 'lodash';
import Vue from 'vue';

function articlefield(type, thumb) {
  if (type === 'article') {
    return `article${thumb ? 'Thumb' : ''}List`;
  } else if (type === 'topic') {
    return `article${thumb ? 'Thumb' : ''}ListByTopic`;
  } else if (type === 'userArticle') {
    return `articleUser${thumb ? 'Thumb' : ''}List`;
  }
  return '';
}
function updateArticleState(state, item) {
  Vue.set(state.articleStates, item.articleId, {
    hasAttention: item.hasAttention,
    hasFavor: item.hasFavor,
    hasPraise: item.hasPraise,
    commentCount: item.commentCount,
    favoriteCount: item.favoriteCount,
    praiseCount: item.praiseCount,
    comments: item.comments
  });
}

function setArticleList(state, data, type, thumb) {
  data.forEach((item, index) => {
    get(item, 'productList', []).forEach(product => {
      product.favorite = false;
    });
    item.blockIndex = 1;
    item.lazy = index >= 1;
    item.isExpand = false;
    item.introHeight = 0;
    item.introCollapseHeight = 0;

    const thumbs = state[articlefield(type, true)];

    if (thumbs) {
      const find = thumbs.find(thumbItem => thumbItem.articleId === item.articleId);

      if (find) {
        item.introHeight = find.introHeight;
        item.introCollapseHeight = find.introCollapseHeight;
      }
    }
    if (!thumb) {
      updateArticleState(state, item);
    } else {
      item.comments = [];
      item.hasAttention = '';
      item.hasFavor = '';
      item.hasPraise = '';
      item.commentCount = 0;
      item.favoriteCount = 0;
      item.praiseCount = 0;
    }
    const imageBlocks = get(item, 'blockList', []).filter(block => block.templateKey === 'image');

    imageBlocks.forEach((img, inx) => {
      let {width, height} = getArticleImageSize({
        width: img.width,
        height: img.height,
        MIN_SCALE: inx === 0 ? (3 / 4) : 0
      });

      img.width = parseInt(width, 10);
      img.height = parseInt(height, 10);
    });
  });
  state[articlefield(type, thumb)] = state[articlefield(type, thumb)].concat(data);
}

export default {
  [Types.FETCH_ARTICLE_LIST_REQUEST](state, {refresh}) {
    state.fetchArticleList = true;
    if (refresh) {
      state.articleList = [];
    }
  },
  [Types.FETCH_ARTICLE_LIST_SUCCESS](state, {data, thumb}) {
    state.fetchArticleList = false;
    setArticleList(state, data, 'article', thumb);
  },
  [Types.FETCH_ARTICLE_LIST_FAILD](state) {
    state.fetchArticleList = false;
  },
  [Types.FETCH_ARTICLE_LIST_USER_REQUEST](state, {refresh}) {
    state.fetchArticleUserList = true;
    if (refresh) {
      state.articleUserList = [];
    }
  },
  [Types.FETCH_ARTICLE_LIST_USER_SUCCESS](state, {data, thumb}) {
    state.fetchArticleUserList = false;
    setArticleList(state, data, 'userArticle', thumb);
  },
  [Types.FETCH_ARTICLE_LIST_USER_FAILD](state) {
    state.fetchArticleUserList = false;
  },
  [Types.FETCH_ARTICLE_TOPIC_REQUEST](state, {page}) {
    state.fetchArticleListByTopic = true;
    if (page === 1) {
      state.articleLastedTimeByTopic = 0;
      state.articleListByTopic = [];
    }
  },
  [Types.FETCH_ARTICLE_TOPIC_SUCCESS](state, {data}) {
    state.fetchArticleListByTopic = false;
    state.articleLastedTimeByTopic = data.lastedTime;
    setArticleList(state, data, 'topic');
  },
  [Types.FETCH_ARTICLE_TOPIC_FAILD](state) {
    state.fetchArticleListByTopic = false;
  },
  [Types.FETCH_ARTICLE_PRODUCT_SUCCESS](state, {articles, favs, articleProductType}) {
    articles.forEach(article => {
      if (article.articleProductType === articleProductType) {
        get(article, 'productList', []).forEach(product => {
          const find = favs.find(f => {
            if (articleProductType === 1) {
              return f.id === product.productId;
            } else if (articleProductType === 2) {
              return f.id === product.productSkn;
            }
          });

          if (find) {
            product.favorite = find.favorite;
          }
        });
      }
    });
  },
  [Types.CHANGE_AUTHOR_FOLLOW](state, {authorUid, follow, type}) {
    state[articlefield(type)].forEach(article => {
      if (article.authorUid === authorUid) {
        article.hasAttention = follow ? 'Y' : 'N';
      }
    });
  },
  [Types.CHANGE_ARTICLE_LIST_SLIDE](state, {articleId, index, type}) {
    console.log(articleId, index, type);
    state[articlefield(type)].forEach(article => {
      if (article.articleId === articleId) {
        article.blockIndex = index;
        return;
      }
    });
  },
  [Types.UPDATE_ARTICLE_STATE](state, {data}) {
    updateArticleState(state, data);
  },
  [Types.ASYNC_ARTICLE_COMMENT](state, {articleId, type}) {
    state[articlefield(type)].forEach(article => {
      if (article.articleId === articleId) {
        article.comments = state.articleStates[articleId].comments;
      }
    });
  },
  [Types.CHANGE_ARTICLE_LIST_INTRO](state, {articleId, isExpand, type}) {
    const find = state[articlefield(type)].find(article => article.articleId === articleId);

    if (find) {
      find.isExpand = isExpand;
    }
  },
  [Types.CHANGE_ARTICLE_LIST_INTRO_HEIGHT](state, {articleId, introHeight, introCollapseHeight, type}) {
    const find = state[articlefield(type)].find(article => article.articleId === articleId);

    if (find) {
      find.introHeight = introHeight || find.introHeight;
      find.introCollapseHeight = introCollapseHeight || find.introCollapseHeight;
    } else {
      const findThumb = state[articlefield(type, true)].find(article => article.articleId === articleId);

      if (findThumb) {
        findThumb.introHeight = introHeight || findThumb.introHeight;
        findThumb.introCollapseHeight = introCollapseHeight || findThumb.introCollapseHeight;
      }
    }
  },
  [Types.GUANG_ARTICLE_CONTENT](state, data) {
    state.fetchArticleDetail = false;
    state.articleDetail = { getArticleContent: data };
  },
  [Types.FETCH_GUANG_FAILED](state) {
    state.fetchArticleDetail = false;
  },
  [Types.FETCH_GUANG_REQUEST](state) {
    state.fetchArticleDetail = true;
  },
  [Types.FETCH_GUANG_SUCCESS](state, data) {
    state.fetchArticleDetail = false;
    state.articleDetail = data;
  },
  [Types.GUANG_DETAIL_PRODUCT_LIST](state, data) {
    state.articleProductList = data;
  },
  [Types.GUANG_CHANGE_PRODUCT_FAV](state, favsList) {
    get(state.articleDetail, 'getArticleContent', []).forEach(c => {
      const products = get(c, 'relatedReco.goods', []);

      products.forEach(p => {
        const fav = favsList.find(i => `${i.id}` === `${p.product_id}`);

        p.favorite = get(fav, 'favorite', false);
      });
    });
  },
  [Types.FETCH_TOPIC_INFO_REQUEST](state, topicId) {
    state.fetchTopicInfo = true;
  },
  [Types.FETCH_TOPIC_INFO_SUCCESS](state, data) {
    state.fetchTopicInfo = false;
    data.hasAttention = true || data.isAttend === 'Y';
    state.topicInfo = data;
  },
  [Types.FETCH_TOPIC_INFO_FAILD](state) {
    state.fetchTopicInfo = false;
    state.topicInfo = {};
  },
  [Types.CHANGE_TOPIC_FOLLOW](state, {topicId, follow}) {
    if (+state.topicInfo.topicId === +topicId) {
      state.topicInfo.hasAttention = follow;
    }
  },
};