import React from 'react';
import { connect } from "react-redux";
import { FlatList, ActivityIndicator, Text, View, TouchableWithoutFeedback, ImageBackground } from 'react-native';
import WebinarInfoScreen from '../screens/WebinarInfoScreen';
import images from '../assets/images/index';
import WebinarRating from '../components/WebinarRating';


export class FetchExample extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			isLoading: true,
			upcomingWebinars: [],
			category_id: '',
			call_all_webinars: '',
		}
		console.log(this.state, 'here')
	}

	componentDidMount() {
		this.checkForCategoryId()


	}

	checkForCategoryId() {
		let call_all_webinars = '';
		if(this.props.category_id != undefined){
			this.state.category_id = this.props.category_id
			let call_all_webinars = '/' + this.state.category_id;
			this.fetchWebinars(call_all_webinars)
		}
		this.fetchWebinars(call_all_webinars)
	}

	fetchWebinars = async () => {
		try {
			console.log(this.state.call_all_webinars)
			await fetch(this.state.call_all_webinars, {
				method: 'GET',
				headers: new Headers({
					'Authorization': 'Bearer ' + this.props.token.token,
					'Content-Type': 'application/x-www-form-urlencoded',
					'Accept': 'application/json'
				})
			})
				.then((response) => response.json())
				.then((responseJson) => {
					this.setState({
						isLoading: false,
						upcomingWebinars: responseJson
					})
					this.updateData(this.state.upcomingWebinars)
				})
				.catch((error) => {
					console.error(error);
				})
		} catch (error) {
			console.error(error);
		}
	}

	countWebinars() {
		return this.state.upcomingWebinars.length;
	}

	updateData(data) {
		data.push({
			"category_name": "End_Card",
			"name": "Show All",
		})
		this.setState({
			upcomingWebinars: data
		});
	}

	renderCards(item) {
		if (item.category_name == 'End_Card') {
			return (
				<TouchableWithoutFeedback onPress={() => this.props.showAll()} >
					<View>
						<ImageBackground
							source={this.backgroundImage(item)}
							borderRadius={3}
							resizeMode='contain'
							style={{
								elevation: 5,
								paddingLeft: 20,
								paddingRight: 10,
								height: 150,
								margin: 10,
								width: 125
							}}>
							<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
								<Text style={{ fontSize: 18, color: 'black' }}>Browse Library</Text>
							</View>
						</ImageBackground>
					</View>
				</TouchableWithoutFeedback>
			);
		} else {
			return (
				<TouchableWithoutFeedback onPress={() => this.props.setWebinar(item)} >
					<View>
						<ImageBackground
							source={this.backgroundImage(item)}
							borderRadius={3}
							resizeMode='contain'
							style={{
								elevation: 5,
								padding: 20,
								height: 150,
								margin: 10,
								width: 250
							}}>
							<Text numberOfLines={3} style={{ minWidth: 125, maxWidth: 185, paddingRight: 7, fontWeight: 'bold', fontSize: 14, color: 'white' }}>{item.name}</Text>
							<Text style={{ fontSize: 11, color: 'white' }}>{item.category_name}</Text>
							<View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
								<WebinarRating />
							</View>
						</ImageBackground>
					</View>
				</TouchableWithoutFeedback>

			);
		}

	}

	backgroundImage(item) {
		switch (item.category_name) {
			case "Small Animal":
				return images.small_animal;
			case "Spanish Webinars":
				return images.spanish;
			case "Nurse":
				return images.nurse;
			case "Equine":
				return images.equine;
			case "Practice Management":
				return images.practice_management;
			case "Virtual Congress 2020":
				return images.vc2020;
			case "Virtual Congress 2019":
				return images.vc2019;
			case "Exotics":
				return images.exotics;
			case "Farm":
				return images.farm;
			case "Health & Wellbeing":
				return images.health_and_wellbeing;
			case "End_Card":
				return null;
			default:
				return images.webinar_one;
		}
	}

	render() {
		if (this.state.isLoading) {
			return (
				<View style={{ flex: 1, padding: 20 }}>
					<ActivityIndicator size={'large'} />
				</View>
			)
		}

		return (
			<View>
				<Text style={{ paddingLeft: 10, fontSize: 18 }}>Our Latest Webinars</Text>
				<FlatList
					horizontal={true}
					data={this.state.upcomingWebinars}
					showsHorizontalScrollIndicator={false}
					renderItem={({ item }) => (

						<View>
							{this.renderCards(item)}
						</View>
					)}
					keyExtractor={({ index }, e) => index}
					extraData={this.state}
				/>
			</View>
		);
	}
}
const mapStateToProps = (state) => {
	return {
		auth: state.auth,
		token: state.token
	}
};

export default connect(mapStateToProps)(FetchExample)