import React, { Component } from 'react';
import {
	TouchableOpacity,
	Platform,
	View,
	Modal,
} from 'react-native';
import {
	color,
	transparentize,
	NixplayIcon,
	Text,
} from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import SafeArea from 'react-native-safe-area';
import ViewOverflow from 'react-native-view-overflow';
import Arrow from '~/images/general/arrow.svg';
import i18n from '~/locale/i18n';

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

const styles = {
	button: {
	},
	wrapper: {
		backgroundColor: transparentize(color.black, 50),
		alignContent: 'center',
		justifyContent: 'flex-end',
		flex: 1,
	},
	buttonContainer: {

		height: 115,
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	buttonRound: {
		height: 68,
		width: 68,
		paddingTop: 14,
		paddingBottom: 0,
		borderRadius: 34,
		alignItems: 'center',
		justifyContent: 'center',
	},
	circleLine: {
		flex: 0,
		height: 62,
		width: 62,
		paddingTop: 14,
		borderRadius: 31,
		borderWidth: 1,
		borderColor: color.mistBlue03,
	},
	buttonContent: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	container: {
		backgroundColor: 'skyblue',
		alignContent: 'center',
		alignItems: 'center',
	},
};

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

		if (!isiOS) {
			this.setState({
				safeAreaInsets: {
					top: 0, left: 0, bottom: 0, right: 0,
				},
			});
		}
	}

	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() {
		return {
			marginBottom: this.state.safeAreaInsets.bottom,
			marginLeft: this.state.safeAreaInsets.left,
			marginRight: this.state.safeAreaInsets.right,
		};
	}

	render() {
		const {
			modalVisible,
		} = this.props;
		const Wrapper = isiOS ? View : ViewOverflow;
		return (
			<Modal
				animationType="slide"
				transparent
				visible={modalVisible}
				onRequestClose={() => {
				}}
			>
				<ViewOverflow style={styles.wrapper}>
					<TouchableOpacity
						onPress={this.props.onPress}
					>
						<Wrapper style={[this.getSafeMargin()]}>
							<ViewOverflow style={styles.buttonContainer} >
								<Text color="white" style={{ textAlign: 'center' }}>{i18n.t('frames.addYourPhotovideoHints')}</Text>
								<Arrow width={14} height={24} />

								<ViewOverflow>
									<View style={[styles.button, styles.buttonRound]}>
										<View style={[styles.buttonContent, styles.circleLine, { backgroundColor: 'white' }]}>
											<NixplayIcon name="plus-thick" size={28} color="blue" />
										</View>
									</View>
								</ViewOverflow>
							</ViewOverflow>
						</Wrapper>
					</TouchableOpacity>
				</ViewOverflow>
			</Modal>
		);
	}
}
HintsModal.propTypes = {
	modalVisible: PropTypes.bool.isRequired,
	onPress: PropTypes.func,
};

HintsModal.defaultProps = {
	onPress: () => {},
};
