import * as React from 'react'
import isEqual from 'lodash.isequal'
import FeedMainList from '@beisen-cmps/italent-feedlist-wrapper'
import TabsCmp from '@beisen-cmps/italent-tabs'
import { i18nFeedDefault } from './../../helper/i18nDefault'
import { closeNewPullScreen } from './../../helper/index'
import notification from '@beisen-cmps/italent-notification'
import FeedType1 from '@beisen-cmps/italent-feed-1'
import FeedType2 from '@beisen-cmps/italent-feed-2'
import FeedType4 from '@beisen-cmps/italent-feed-4'
import FeedType5 from '@beisen-cmps/italent-feed-5'
import FeedType7 from '@beisen-cmps/italent-feed-7'
import FeedType8 from '@beisen-cmps/italent-feed-8'
import FeedType9 from '@beisen-cmps/italent-feed-9'
import FeedType10 from '@beisen-cmps/italent-feed-10'
import FeedType11 from '@beisen-cmps/italent-feed-11'
import FeedType13 from '@beisen-cmps/italent-feed-13'
import FeedType14 from '@beisen-cmps/italent-feed-14'
import FeedType20 from '@beisen-cmps/italent-feed-20'
import FeedType80 from '@beisen-cmps/italent-feed-80'
import FeedBoxTab from './FeedBoxTab'
import FeedSearch from './FeedSearch'

import {
	LoadMore,
	ShowPopConfirm,
	EmptyPage
} from '@beisen-cmps/italent-feedmix-components'
import Loading from '@beisen/loading'
import styled from 'styled-components'
import {
	getFeedData,
	stickFeedTop,
	deleteFeed,
	cancelFeedTop,
	getSingleFeedData,
	getChannelList
} from '../../helper/require'
import {
	getUserInfo,
	util_rewardOpen,
	isOpenNewTaskApp,
	isI18NZH
} from '../../helper/index'
import { borderBox } from '../../components/styleCommon/'
import { handleSearchFeed, handleSearchUser } from '../../helper/require'

const MainBox = styled.div`
	width: 100%;
	min-width: 635px;
`
const boxRadius = `
    background: #ffffff;
    border-radius: 3px;
`
const TopBox = styled.div`
	${boxRadius}
	width:100%;
`
const FeedBox = styled.div`
	width: 100%;
	padding: 0 16px 10px;
	${boxRadius}
	margin-top: 12px;
	${borderBox} /* min-height:500px; */
`
const TabBox = styled.div`
	width: 100%;
	position: relative;
	margin-bottom: 4px;
`
const FeedContentContainer = styled.div`
	width: 100%;
	min-height: ${window.innerHeight - 254}px; /*距离底部12px*/
	position: relative;
	/* overflow: hidden; */
`
interface Props {
	data: any
	translation: any
}
interface States {
	feeds: Array<any>
	channels: Array<any>
	isEnd: boolean
	lastId: string
	isFetching: boolean
	channelId: number
	popState: any
	loadFlag: boolean
	isFetchingMore: boolean
	currentTab: any
	_channelsData: any
	channnelSettingData: any
	searchText: any
	isSearchFeed: boolean
	searchUserParam: any
}
export default class Feeds extends React.Component<Props, States> {
	i18nTranslation: any
	constructor(props: Props) {
		super(props)
		const {
			data: { FeedValue }
		} = props

		this.state = {
			feeds: [],
			channels: [],
			channnelSettingData: (FeedValue && FeedValue.channels) || [],
			_channelsData: [],
			isEnd: false,
			lastId: '',
			isFetching: false,
			isFetchingMore: false,
			channelId: 2,
			currentTab: {},
			loadFlag: true,
			popState: {
				hidden: true
			},
			searchText: '',
			isSearchFeed: true,
			searchUserParam: ''
		}
		this.i18nTranslation = Object.assign(
			{},
			i18nFeedDefault,
			props.translation
		)
	}
	componentDidMount() {
		this.getChannelsList()
		window.addEventListener(
			'scroll',
			this.debunce(this.dealWindowScroll.bind(this), 300)
		)
		//监听发分享和派任务的focus事件，关闭推屏
		document.addEventListener('focus', closeNewPullScreen, true)
	}
	//函数节流
	debunce(fun: () => void, wait: number) {
		let timer: any
		return () => {
			if (timer) {
				return
			}
			timer = setTimeout(() => {
				fun()
				timer = null
			}, wait)
		}
	}
	componentWillReceiveProps(nextProps: any) {
		const {
			data: { FeedValue }
		} = nextProps
		const { _channelsData, channels } = this.state
		if (FeedValue && FeedValue.channels) {
			this.getBlackList(FeedValue.channels)
			const _channels = this.manageFeedData(_channelsData)
			if (!isEqual(_channels, channels)) {
				this.setState({
					channels: _channels,
					channnelSettingData: FeedValue.channels
				})
			}
		}
	}
	componentWillUnmount() {
		window.removeEventListener('scroll', this.dealWindowScroll)
		document.removeEventListener('focus', closeNewPullScreen)
	}

	dealWindowScroll() {
		const { isFetchingMore, isEnd, isFetching } = this.state
		if (!isFetchingMore && !isEnd && !isFetching) {
			let docEle = document.documentElement || document.body
			let scrollTop = docEle.scrollTop
			let clientHeight = docEle.clientHeight
			let docHeight = document.body.offsetHeight
			if (docHeight - (scrollTop + clientHeight) <= clientHeight) {
				this.handleLoadMore()
			}
		}
	}
	getChannelsList = async () => {
		const res = await getChannelList()
		if (res.Code == 1 && res.Data) {
			this.getBlackList(this.state.channnelSettingData)
			let channels = this.manageFeedData(res.Data.channels),
					channelId = channels[0].subChannels && channels[0].subChannels[0] && channels[0].subChannels[0].id || 2
			this.getFeedData({ channelId: channelId }) // 请求feedlist数据
			this.setState({
				channels: channels,
				_channelsData: res.Data.channels,
				currentTab: channels[0]
			})
		}
	}
	manageFeedData = (channels: any) => {
		let newChannels = JSON.parse(JSON.stringify(channels))
		const { HasSub } = getUserInfo()
		const { blackList } = this
		newChannels = newChannels.map((item: any) => {
			if (
				(item.type !== 1 && blackList.indexOf(item.id) > -1) ||
				item.id == 1000
			) {
				return false
			}
			if (item.id == 1007 && !HasSub) {
				return false
			}
			if (item.subChannels) {
				item.subChannels = item.subChannels.filter(
					(i: any) => blackList.indexOf(i.id) == -1
				)
				item.subChannels.map((thirdItem: any, _index: number) => {
					if (!thirdItem.subChannels) {
						return;
					}
					thirdItem.subChannels = thirdItem.subChannels.filter((i: any) => {
						return blackList.indexOf(i.id) == -1
					})
				})

			}
			if (
				item.type == 1 &&
				item.subChannels.filter(
					(i: any) => blackList.indexOf(i.id) == -1
				).length > 0
			) {
				item.subChannels = item.subChannels.map(
					(_item: any, _index: number) => {
						if (_item.subChannels) {
							item.subChannels[_index] = _item.subChannels.filter(
								(i: any) => blackList.indexOf(i.id) == -1
							)
						}
						return _item
					}
				)
			}

			return item
		})
		return newChannels.filter((i: any) => i)
	}
	//获取feed数据
	async getFeedData(param: any) {
		this.setState({
			isFetching: true
		})
		const { Code, Data } = await getFeedData(param)
		if (Code == 1) {
			const { isEnd, feeds, lastId } = Data
			this.setState({
				feeds: feeds || [],
				isEnd,
				lastId,
				isFetching: false
			})
		}
	}

	blackList: any
	getBlackList = (data: any) => {
		if (data.length == 0) return data
		let newChannels = JSON.parse(JSON.stringify(data))
		this.blackList = []
		newChannels = newChannels.map((item: any) => {
			if (item.type !== 1 && !item.checked) {
				this.blackList.push(item.id)
			}
			if (item.subChannels) {
				item.subChannels = item.subChannels.filter((i: any) => {
					if (!i.checked) {
						this.blackList.push(i.id)
					}
					if (!i.subChannels) {
						if (!i.checked) {
							this.blackList.push(i.id)
						}
					} else {
						i.subChannels.filter((thirdItem: any) => {
							if (!thirdItem.checked) {
								this.blackList.push(thirdItem.id)
							}
						})
					}


				})
			}
			if (
				item.type == 1 &&
				item.subChannels.filter((i: any) => !i.checked).length > 0
			) {
				item.subChannels = item.subChannels.map(
					(_item: any, _index: number) => {
						if (_item.subChannels) {
							_item.subChannels.filter((i: any) => {
								if (!i.checked) {
									this.blackList.push(i.id)
								}
							})
						}
						if (!item.checked) {
							this.blackList.push(item.id)
						}
					}
				)
			}
		})
	}
	handleLoadMore = async () => {
		this.setState({
			isFetchingMore: true
		})
		const { lastId, feeds, channelId, searchText, isSearchFeed, searchUserParam } = this.state
		const param = {
			channelId: channelId, //分类
			pageSize: 20, //获取多少条数据
			commentCount: 5, //回复展示几条
			to_userId: 0, //看谁的动态
			objId: '', //
			startId: lastId //从哪条feed开始}
		}
		if (searchText) {
			isSearchFeed ? handleSearchFeed(searchText, channelId, lastId).then(data => {
				const { Code, Data } = data
				if (Code === 1) {
					this.setState({ feeds: feeds.concat(Data.feeds), isEnd: Data.isEnd, lastId: Data.lastId })

				}
			}) : handleSearchUser(searchUserParam, channelId, lastId).then(data => {
				const { Code, Data } = data
				if (Code === 1) {
					this.setState({ feeds: feeds.concat(Data.feeds), isEnd: Data.isEnd, lastId: Data.lastId })
				}
			})
		} else {
			const { Code, Data } = await getFeedData(param)
			if (Code == 1) {
				const { isEnd, feeds: _newFeeds, lastId } = Data
				this.setState({ feeds: feeds.concat(_newFeeds), isEnd, lastId })
			}
		}
		this.setState({
			isFetchingMore: false
		})
	}
	handleTabsClick = (channelId: number, item: any) => {
		closeNewPullScreen(); // 点击tab关闭推屏
		const searchText = '', searchUserParam = '';
		if (item) {
			this.setState({
				channelId: channelId,
				currentTab: item || {},
				searchText,
				searchUserParam
			})
		} else {
			this.setState({
				channelId: channelId,
				searchText,
				searchUserParam
			})
		}
		this.getFeedData({ channelId: channelId })
	}
	//置顶
	handleStickFeedTop = async (
		feedId = '',
		flag: boolean,
		callback: Function,
		target: any
	) => {
		const { Code, Message } = await stickFeedTop({
			feed_id: feedId
		})
		if (Code == 1) {
			callback(flag)
		} else {
			// 友情提示
			notification.info({
				target,
				showType: 2,
				message: Message,
				pos: 'rightBottom',
				friendTips: this.i18nTranslation.friendTips
			})
		}
	}
	//取消置顶
	handleCancelFeedTop = async (
		feedId = '',
		flag: boolean,
		callback: Function
	) => {
		const { Code } = await cancelFeedTop({
			feed_id: feedId
		})
		if (Code == 1) {
			callback(flag)
		}
	}

	rewardSuccess = (feedId: string) => {
		setTimeout(async () => {
			const { feeds } = this.state
			const res = await getSingleFeedData(feedId)
			if (res.Code == 1) {
				let targetIndex = 0
				feeds.filter((item, index) => {
					if (item.feedId == feedId) {
						targetIndex = index
					}
				})
				const newFeeds = [
					...feeds.slice(0, targetIndex),
					res.Data,
					...feeds.slice(targetIndex + 1)
				]
				this.setState({
					feeds: newFeeds
				})
			}
		}, 1000)
	}
	renderFeedContentArea = () => {

		const { feeds, isFetching, searchText } = this.state
		const feedsProps = {
      feeds,
      searchText: '', // 暂时下线线上搜索词标红功能
			rewardSuccess: this.rewardSuccess,
			onTop: this.handleTop,
			onDeleteFeed: this.handleDeleteFeed,
			isShowReward: util_rewardOpen(),
			isNewTaskPullScreen: isOpenNewTaskApp(),
			closeNewPullScreen: closeNewPullScreen,
			feedItemObj: {
				1: FeedType1,
				2: FeedType2,
				3: FeedType2,
				4: FeedType4,
				5: FeedType5,
				6: FeedType10,
				7: FeedType7,
				8: FeedType8,
				9: FeedType9,
				10: FeedType10,
				11: FeedType11,
				13: FeedType13,
				14: FeedType14,
				20: FeedType20,
				80: FeedType80
			},
			translation: this.i18nTranslation
		}
		if (isFetching) {
			return <Loading />
		}
		if (feeds.length == 0) {
			return <EmptyPage translation={this.i18nTranslation} />
		}
		return <FeedMainList {...feedsProps} />
	}
	// 新增feed
	handleAddFeed = (feed: any) => {
		this.setState((prevState: States) => ({
			feeds: [feed, ...prevState.feeds]
		}))
	}
	//删除feed
	handleDeleteFeed = async (feedId = '', target: any) => {
		ShowPopConfirm({
			message: this.i18nTranslation.deletTipsText,
			targetNode: target,
			isShowTriangle: false,
			align: 'right',
			handleOk: async () => {
				const { Code, Message } = await deleteFeed({
					feed_id: feedId
				})
				if (Code == 1) {
					this.setState({
						feeds: this.state.feeds.filter(item => {
							return item.feedId != feedId
						})
					})
				} else {
					notification.error({
						target,
						showType: 2,
						message: Message,
						pos: 'rightBottom'
					})
				}
			},
			cancelText: this.i18nTranslation.cancelText,
			confirmText: this.i18nTranslation.confirmText,
			size: {
				height: isI18NZH() ? 80 : 100,
				width: 260,
			},
		})
	}
	// 处理搜索
	handleSearch = (data: any, searchContent: any, isSearchFeed: boolean) => {
    let searchText = searchContent, searchUserParam;
    if (typeof searchText === 'object') {
			searchText = searchContent.Name || '';
			searchUserParam = searchContent || {};
    }
		const { feeds, isEnd, lastId } = data
		this.setState({
			feeds,
			isEnd,
			lastId,
			searchText,
			searchUserParam,
			isSearchFeed
		})
	}
	//处理置顶或取消
	handleTop = (flag = true, feedId = '', target: any, callback: Function) => {
		if (flag) {
			this.handleStickFeedTop(feedId, flag, callback, target)
		} else {
			this.handleCancelFeedTop(feedId, flag, callback)
		}
	}

	render() {
		const {
			isEnd,
			isFetchingMore,
			channels,
			currentTab,
			channelId,
			isFetching
		} = this.state
		const i18nTranslation = this.i18nTranslation
		return (
			<MainBox>
				<TopBox>
					<FeedBoxTab
						handleAddFeed={this.handleAddFeed}
						i18nTranslation={i18nTranslation}
					/>
				</TopBox>
				<FeedBox>
					<TabBox>
						<TabsCmp
							style={{
								minHeight: '83px'
							}}
							channels={channels}
							fetchFeedData={this.handleTabsClick}
						/>
						<FeedSearch
							handleSearch={this.handleSearch}
							tabName={currentTab.name}
							key={channelId}
							channelId={channelId}
							i18nTranslation={i18nTranslation}
						/>
					</TabBox>

					<FeedContentContainer>
						{this.renderFeedContentArea()}
					</FeedContentContainer>

					{!isEnd && !isFetching && (
						<LoadMore
							handleLoadMore={this.handleLoadMore}
							loading={isFetchingMore}
							translation={i18nTranslation}
						/>
					)}
				</FeedBox>
			</MainBox>
		)
	}
}