import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { ActionSheet, Text, color } from 'nixplay-ui-kit';
import { PropTypes } from 'prop-types';
import call from 'react-native-phone-call';
import email from 'react-native-email';
import _ from 'lodash';
import { config } from '~/config';
import i18n from '~/locale/i18n';
import { analytics } from '~/lib/utils';

const options = [
	{ tel: config.supportTelUK, locale: '[UK]' },
	{ tel: config.supportTelUS, locale: '[US]' },
	{ tel: config.supportTelDE, locale: '[DE]' },
];

const styles = StyleSheet.create({
	actionText: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignContent: 'center',

	},
	actionButton: {
		paddingHorizontal: 16,
		height: 56,
		justifyContent: 'center',
	},
	text: {
		paddingHorizontal: 5,
		textAlign: 'center',
	},
});
export class GetHelp extends Component {
	constructor(props) {
		super(props);
		this.open = () => this.contentActionSheet.open();
		this.close = () => this.contentActionSheet.close();
	}

	callAction = (tel, locale, cb) => {
		const args = {
			number: tel, // String value with the number to call
			prompt: false,
		};
		call(args).then(() => cb);
		if (!_.isEmpty(locale)) {
			let formatLocale = locale.replace('[', '');
			formatLocale = formatLocale.replace(']', '');
			formatLocale = formatLocale.toLowerCase();
			analytics.logEvent(`${this.props.origin}_call_${formatLocale}`);
		}
	};

	emailAction = (cb) => {
		const to = [config.supportEmail];// string or array of email addresses
		email(to, {}).then(() => cb);
	};

	renderAction = (tel, locale) => (
		<ActionSheet.Custom style={styles.actionButton} key={`${tel}custom`}>
			<TouchableOpacity
				style={[styles.actionText]}
				key={tel}
				onPress={() => {
					this.callAction(tel, locale, () => {
						this.contentActionSheet.close();
					});
				}}
			>
				<Text key="1" style={styles.text} textStyle="title3" color="mistBlue04">
					{i18n.t('common.call')} <Text key="2" style={styles.text} textStyle="title3" color="blue">{tel}</Text> {locale}
				</Text>
			</TouchableOpacity>
		</ActionSheet.Custom>

	)

	render() {
		return (
			<ActionSheet
				style={{ backgroundColor: color.white }}
				ref={(actionSheet) => { this.contentActionSheet = actionSheet; }}
			>
				<ActionSheet.Action
					color="blue"
					onPress={() => {
						this.emailAction(() => {
							this.contentActionSheet.close();
						});
					}}
					testID="SupportEmail"
				>
					{config.supportEmail}
				</ActionSheet.Action>
				{
					_.flatMap(options, (item) => this.renderAction(item.tel, item.locale))
				}
				<ActionSheet.Cancel>{i18n.t('common.cancel')}</ActionSheet.Cancel>
			</ActionSheet>
		);
	}
}

GetHelp.propTypes = {
	origin: PropTypes.string.isRequired,
};
