import React from 'react'
import { View, FlatList, ActivityIndicator } from 'react-native'
import FAIcon from 'react-native-vector-icons/FontAwesome'
import { connect } from 'react-redux'
import CardHeader from './CardHeader'
import CardMenu from './CardMenu'
import { trackException } from '../../util/logger'
import css from '../../styles/css'
import LAYOUT from '../../styles/LayoutConstants'

class ScrollCard extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			numDots: 0,
			dotIndex: 0
		}
	}

	componentDidMount() {
		if (this.props.scrollData.length ) {
			this._flatlist.scrollToOffset({ x: this.props.lastScroll, animated: false })
		}
	}

	setNativeProps(props) {
		this._card.setNativeProps(props)
	}

	countDots = (width, height) => {
		const numDots = this.props.scrollData.length
		this.setState({ numDots })
	}

	handleScroll = (event) => {
		if (this.props.updateScroll) {
			this.props.updateScroll(event.nativeEvent.contentOffset.x)
		}
		const dotIndex = Math.floor(event.nativeEvent.contentOffset.x / (LAYOUT.MAX_CARD_WIDTH - 12)) // minus padding
		this.setState({ dotIndex })
	}

	render() {
		let list
		if (this.props.scrollData.length > 0) {
			list = (
				<FlatList
					ref={(c) => { this._flatlist = c }}
					extraData={this.props.extraData}
					style={css.scrollcard_listStyle}
					onContentSizeChange={this.countDots}
					pagingEnabled
					horizontal
					showsHorizontalScrollIndicator={false}
					onScroll={this.handleScroll}
					scrollEventThrottle={0}
					data={this.props.scrollData}
					enableEmptySections={true}
					keyExtractor={(listItem, index) => {
						if (listItem.id) return listItem.id.toString() + index
						if (listItem.LocationId) return listItem.LocationId.toString() + index
						else {
							const error = new Error('Invalid ScrollCard list item')
							trackException(error, listItem)
							return index
						}
					}}
					renderItem={this.props.renderItem}
				/>
			)
		} else {
			list = (
				<View style={[css.dlc_cardcenter, css.dlc_wc_loading_height]}>
					<ActivityIndicator size="large" />
				</View>
			)
		}

		return (
			<View>
				<View
					style={[css.card_container, this.state.numDots <= 1 ? css.scrollcard_main_marginBottom : null]}
					ref={(i) => { this._card = i }}
				>
					<CardHeader
						id={this.props.id}
						title={this.props.title}
						menu={
							<CardMenu
								hideCard={this.props.hide}
								cardRefresh={this.props.cardRefresh}
								extraActions={this.props.extraActions}
								id={this.props.id}
							/>
						}
					/>
					{list}
					{this.props.actionButton}
				</View>

				{ this.state.numDots > 1 ? (
					<PageIndicator
						numDots={this.state.numDots}
						dotIndex={this.state.dotIndex}
					/>
				) : null }
			</View>
		)
	}
}

const PageIndicator = ({ numDots, dotIndex }) => {
	const dots = []
	for (let i = 0; i < numDots; ++i) {
		const dotName = (dotIndex === i) ? ('circle') : ('circle-thin')
		const dot = (
			<FAIcon
				style={css.scrollcard_dotStyle}
				name={dotName}
				size={10}
				key={'dot' + i}
			/>
		)
		dots.push(dot)
	}

	return (
		<View style={css.scrollcard_dotsContainer}>
			{dots}
		</View>
	)
}

const mapDispatchToProps = dispatch => ({
	hide: (id) => {
		dispatch({ type: 'UPDATE_CARD_STATE', id, state: false })
	}
})

export default connect(null, mapDispatchToProps)(ScrollCard)

@@ -1651,16 +1651,71 @@
 tem.id) 
+%7B%0A%09%09%09%09%09%09%09// Return unique saved shuttle stop id%0A%09%09%09%09%09%09%09
 return l
@@ -1735,31 +1735,30 @@
 String()
- + index
 %0A%09%09%09%09%09%09
+%7D else 
 if (list
@@ -1774,16 +1774,78 @@
 tionId) 
+%7B%0A%09%09%09%09%09%09%09// Return unique saved parking lot LocationId%0A%09%09%09%09%09%09%09
 return l
@@ -1866,34 +1866,17 @@
 onId
-.toString() + index
 %0A%09%09%09%09%09%09
+%7D 
 else
@@ -1889,102 +1889,25 @@
 %09%09%09%09
-const error = new Error('Invalid ScrollCard list item')%0A%09%09%09%09%09%09%09trackException(error, listItem)
+// Default return
 %0A%09%09%09
@@ -1922,16 +1922,27 @@
 rn index
+.toString()
 %0A%09%09%09%09%09%09%7D

refactor keyExtractor logic in ScrollCard to fix #440