import Taro from '@tarojs/taro'
import { View, Image, Text, ScrollView } from '@tarojs/components'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CommonEvent } from '@tarojs/components/types/common'
import { CtsScrollProps, CtsScrollState } from 'types/scroll'

let scrollLeft = `${Taro['common'].imgUrlTeam}scroll_left.png`
let scrollRight = `${Taro['common'].imgUrlTeam}scroll_right.png`
let toTop = `${Taro['common'].imgUrlTeam}return_top.png`

/**
 * 滚动列表组件
 */
export default class CtsScroll extends CtsComponent<CtsScrollProps, CtsScrollState> {
	// static options = {
	// 	addGlobalClass: true
	// }

	public static defaultProps: CtsScrollProps
	public static propTypes: InferProps<CtsScrollProps>

	public constructor(props: CtsScrollProps) {
		super(props)
		this.state = {
			scrollTop: 0,
			isTop: false,
			scrollHeight: 0
		}
	}

	componentDidMount(): void { 
		let { windowHeight, windowWidth } = Taro.getSystemInfoSync()
		Taro.createSelectorQuery().selectAll('#scroll-height').boundingClientRect((res: any) => { 
				console.log('createSelectorQuery', res)

				let height: number = 0
				for (let item of res) { 
					height += item.height
				}
				console.log(height)
				this.setState({ scrollHeight: (windowHeight - height) * 750 / windowWidth })
		}).exec()
	}

	public render(): JSX.Element {
		const { scrollTop, isTop, scrollHeight } = this.state
		const { className, loading, complete, height, onScrollToLower } = this.props

		const style = {
			maxHeight: height || Taro.pxTransform(scrollHeight)
		}

		return (
			<View className={classNames('cts-scroll', className)}>
				<ScrollView style={style} scrollY={true} scrollTop={scrollTop} onScrollToLower={onScrollToLower} scrollWithAnimation={true} enableBackToTop={true} onScroll={(e) => {
					this.setState({
						isTop: e.detail.scrollTop > 200
					})
				}}>
					{this.props.children}

					<View className='scroll-bottom'>
						{
							loading &&
							<View className='scroll-item'>
								<Text className='iconfont iconjiazai' />
								<Text className='scroll-loading'>加载中...</Text>
							</View>
						}

						{
							complete &&
							<View className='scroll-item'>
								<Image src={scrollLeft} lazyLoad={true} mode='widthFix' />
								<Text className='scroll-complete'>我是有底线的</Text>
								<Image src={scrollRight} lazyLoad={true} mode='widthFix' />
							</View>
						}
					</View>
				</ScrollView>

				{
					isTop &&
					<Image className='scroll-to-top' onClick={() => {
						this.setState({
							scrollTop: 0,
						}, () => {
							this.setState({
								scrollTop: ''
							})
						})
					}} src={toTop} />
				}
			</View>
		)
	}
}

CtsScroll.defaultProps = {
	loading: false,
	complete: false,
	height: '',
	onScrollToLower() { }
}

CtsScroll.propTypes = {
	loading: PropTypes.bool,
	complete: PropTypes.bool,
	height: PropTypes.string,
	onScrollToLower: PropTypes.func
}