
import React, { Component } from 'react';
import {
	StyleSheet,
	View,
	Platform,
	TouchableOpacity,
} from 'react-native';
import {
	Text,
	Button,
	Modal,
	NixplayIcon as Icon,
	color,
} from 'nixplay-ui-kit';
import ViewOverflow from 'react-native-view-overflow';
import SafeArea from 'react-native-safe-area';
import PropTypes from 'prop-types';
import { Checkbox } from '~comp/checkbox';
import i18n from '~/locale/i18n';
import { TutorialContents } from './tutorialContents';

const isiOS = Platform.OS === 'ios';

const styles = StyleSheet.create({
	fullScreenModal: {
		flex: 1,
		overflow: 'hidden',
		backgroundColor: color.white,
	},
	contentContainerStyle: {
		paddingBottom: 34,
	},
	contents: {
		flex: 1,
		justifyContent: 'center',
		alignContent: 'center',
		alignItems: 'center',
	},
	modalContent: {
		flex: 1,
		justifyContent: 'center',
		backgroundColor: 'white',
	},
	checkbox: {
		marginHorizontal: 8,
	},
	modalButton: {
		marginHorizontal: 8,
		marginBottom: 8,
	},
	closeButtonContainer: {
		width: '100%',
		flexDirection: 'row',
		justifyContent: 'flex-end',
	},
	closeButton: {
		marginRight: 8,
		width: 16,
		height: 16,
	},
});

export class TutorialModal extends Component {
	constructor(props) {
		super(props);
		this.state = {
			safeAreaInsets: {
				top: 0, left: 0, bottom: 0, right: 0,
			},
			mSkipPhotoPrintTutorial: props.skipPhotoPrintTutorial,
		};
		SafeArea.getSafeAreaInsetsForRootView()
			.then((result) => {
				this.setState({
					safeAreaInsets: result.safeAreaInsets,
				});
			});
	}

	static getDerivedStateFromProps(nextProps, prevState) {
		if ((nextProps.skipPhotoPrintTutorial !== prevState.mSkipPhotoPrintTutorial)) {
			return { mSkipPhotoPrintTutorial: nextProps.skipPhotoPrintTutorial };
		}
		return null;
	}

	componentDidMount() {
		SafeArea.addEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange);
	}

	componentWillUnmount() {
		// Remove event listener
		SafeArea.removeEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange);
	}

	onSafeAreaInsetsForRootViewChange = (result) => {
		// Called every time that safe area insets changed
		this.setState({
			safeAreaInsets: result.safeAreaInsets,
		});
	}
	getSafeMargin = () => ({
		marginTop: this.state.safeAreaInsets.top,
		marginBottom: this.state.safeAreaInsets.bottom,
		marginLeft: this.state.safeAreaInsets.left,
		marginRight: this.state.safeAreaInsets.right,
	})
	render() {
		const Wrapper = isiOS ? View : ViewOverflow;
		return (
			<Modal
				ref={this.props.setRef}
				style={styles.fullScreenModal}
				animationType="slide"
			>
				<Wrapper
					style={[styles.modalContent, this.getSafeMargin()]}
				>
					<View style={styles.contents} >
						<View style={styles.closeButtonContainer}>
							<TouchableOpacity style={styles.closeButton} onPress={this.props.cancel} >
								<Icon name="close" color="grey" size={16} />
							</TouchableOpacity>
						</View>
						<TutorialContents shouldScroll />
					</View>
					<View style={{ justifyContent: 'flex-start', flexDirection: 'row', margin: 8 }} >
						<Checkbox
							color="blue"
							style={styles.checkbox}
							checked={this.state.mSkipPhotoPrintTutorial}
							onToggle={() => {
								this.props.toggleSkipPhotoPrintTutorial(!this.state.mSkipPhotoPrintTutorial);
							}}
						/>
						<Text >{i18n.t('contents.gotItSkipThisPageNextTime')}</Text>
					</View>

					<Button
						style={styles.modalButton}
						type="primary"
						onPress={this.props.confirm}
					>
						<Button.Text>{this.props.cta}</Button.Text>
					</Button>
				</Wrapper>
			</Modal>
		);
	}
}


TutorialModal.propTypes = {
	confirm: PropTypes.func,
	cancel: PropTypes.func,
	setRef: PropTypes.func,
	skipPhotoPrintTutorial: PropTypes.bool,
	toggleSkipPhotoPrintTutorial: PropTypes.func,
	cta: PropTypes.string,
};

TutorialModal.defaultProps = {
	confirm: () => {},
	cancel: () => {},
	setRef: () => {},
	skipPhotoPrintTutorial: false,
	toggleSkipPhotoPrintTutorial: () => {},
	cta: i18n.t('common.continue'),
};

