import React from 'react'
import { StyleSheet, Text, Alert } from 'react-native'
import glamorous from 'glamorous-native'

import {
	BarCodeScanner,
	Permissions,
	Constants,
	BarCodeReadCallback,
} from 'expo'

import {
	NavigationScreenProp,
	NavigationStackScreenOptions,
} from 'react-navigation'

import BackgroundWrapper from '../../components/wrappers/Background'
import Api, * as ApiShapes from '../../helpers/Api'
import CardItem from '../../components/cards/CardItem'
import LoadingArrayHijack from '../../components/wrappers/LoadingArrayHijack'

interface State {
	hasCameraPermission: any
	showCamera: boolean
	barCodeType: string
	barCodeData: string
	loading: boolean
	errorMessage: string
	newCard?: ApiShapes.Card
}

interface Props {}

interface InjectedProps extends Props {
	navigation: NavigationScreenProp<any, any>
}

export default class Logo extends React.Component<Props> {
	static navigationOptions: NavigationStackScreenOptions = {
		title: 'QR Scan',
		headerBackTitle: 'Back',
		headerBackground: '#0057A8',
	}

	state: State = {
		hasCameraPermission: '',
		showCamera: true,
		barCodeType: '',
		barCodeData: '',
		errorMessage: '',
		loading: false,
	}

	async componentDidMount() {
		let { status } = await Permissions.askAsync(Permissions.CAMERA)
		this.setState({ hasCameraPermission: status === 'granted' })
	}

	handleBarCodeRead: BarCodeReadCallback = ({ type, data }) => {
		//Alert.alert(`Barcode '${data}' of type '${type}' was scanned.`)
		this.setState({ showCamera: false, barCodeType: type, barCodeData: data })

		this.fetchNewCard()
	}

	async fetchNewCard() {
		try {
			this.setState({ loading: true })
			const { card } = await Api<
				ApiShapes.getQRCodeReq,
				ApiShapes.getQRCodeResp
			>('cardByQrCode', { code: this.state.barCodeData })
			this.setState({ newCard: card, loading: false })
		} catch (e) {
			console.error('Api error:', e)
			this.setState({ loading: false, errorMessage: e.msg })
		}
	}

	render() {
		const { newCard } = this.state

		const { hasCameraPermission } = this.state
		if (hasCameraPermission === null) {
			return <Text>Requesting for camera permission</Text>
		}
		if (hasCameraPermission === false) {
			return <Text>No access to camera</Text>
		}

		if (this.state.showCamera) {
			return (
				<glamorous.View flex={1} style={styles.container}>
					<BackgroundWrapper />

					<BarCodeScanner
						onBarCodeRead={this.handleBarCodeRead}
						style={{ ...StyleSheet.absoluteFillObject }}
					/>
				</glamorous.View>
			)
		} else {
			return (
				<glamorous.View flex={1}>
					<BackgroundWrapper />

					<TextField>
						The Type is {this.state.barCodeType} with data{' '}
						{this.state.barCodeData}
					</TextField>

					<CardContainer>
						<CardButton>
							<CardItem
								card={newCard}
								height={270}
								style={{ marginHorizontal: 16, marginBottom: 32 }}
							/>
						</CardButton>
					</CardContainer>
				</glamorous.View>
			)
		}
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
		paddingTop: Constants.statusBarHeight,
		backgroundColor: '#ecf0f1',
	},
})

const TextField = glamorous.text({
	color: '#FFFFFF',
	fontSize: 18,
})

const CardButton = glamorous.touchableOpacity({
	justifyContent: 'center',
	alignItems: 'center',
	flexBasis: '50%',
	overflow: 'hidden',
})

const CardContainer = glamorous.view({
	flexDirection: 'row',
	flexWrap: 'wrap',
})