import React from 'react';
import {
	StyleSheet,
	ScrollView,
	View,
} from 'react-native';

import { Text, color, transparentize } from 'nixplay-ui-kit';
import i18n from '~/locale/i18n';
import PropTypes from 'prop-types';

const styles = StyleSheet.create({
	scrollContainer: {
		flex: 1,
		paddingBottom: 8,
	},
	contentContainerStyle: {
	},
	container: {
		flex: 1,
		justifyContent: 'space-between',
		paddingHorizontal: 8,
	},
	title: {
		flex: 1,
		textAlign: 'center',
	},
	infoBox: {
		flex: 1,
		borderWidth: 1,
		borderRadius: 5,
		justifyContent: 'flex-start',
		borderColor: transparentize(color.orange, 10),
		paddingVertical: 16,
	},
	infoText: {
		textAlign: 'left',
	},
	warningText: {
		textAlign: 'center',
		paddingTop: 8,
	},
});

export const DeliveryOptions = (props) => (
	<View style={{
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'flex-start',
		padding: 4,
	}}
	>
		<Text style={{ margin: 4 }}color="mistBlue05">{props.numberBullet}</Text>
		<View style={{ flex: 1 }}>
			<Text color="mistBlue05">{props.deliveryMethod}</Text>
			<Text color="mistBlue04">{props.products}</Text>
		</View>
	</View>
);


DeliveryOptions.propTypes = {
	numberBullet: PropTypes.string.isRequired,
	deliveryMethod: PropTypes.string.isRequired,
	products: PropTypes.string.isRequired,
};

DeliveryOptions.defaultProps = {
};


export const TutorialContents = (props) => {
	const Warpper = props.shouldScroll ? ScrollView : View;
	return (
		<View style={styles.container}>
			<Warpper
				style={styles.scrollContainer}
				contentContainerStyle={styles.contentContainerStyle}
			>
				<Text style={styles.title} textStyle="title1" color="blue">
					{i18n.t('contents.printYourBestMemories')}
				</Text>
				<Text style={styles.title} textStyle="title2" color="yellow">
					{i18n.t('contents.partnerWithFujifilm')}
				</Text>
				<Text style={styles.title} textStyle="caption" color="grey">
					{i18n.t('contents.yourPicturesMakegreateGiftForEveryOccassion')}
				</Text>
				<View style={styles.infoBox}>
					<Text style={styles.title} color="mistBlue05">{i18n.t('contents.twoDeliveryOptions')}</Text>
					<DeliveryOptions
						numberBullet="①"
						deliveryMethod={i18n.t('contents.homeDelivery')}
						products={i18n.t('contents.printsHomeDècorGiftsMugsPhotoBooks')}
					/>
					<DeliveryOptions
						numberBullet="②"
						deliveryMethod={i18n.t('contents.pickupToday')}
						products={i18n.t('contents.printsWallArts')}
					/>
				</View>
			</Warpper>
			<Text style={styles.warningText} textStyle="caption" color="red">{i18n.t('contents.photoPrintUSOnly')}</Text>
		</View>
	);
};

TutorialContents.propTypes = {
	shouldScroll: PropTypes.bool,
};

TutorialContents.defaultProps = {
	shouldScroll: false,
};
