import React, { Component } from 'react';
import {
	StyleSheet,
	View,
	TouchableOpacity,
	Modal,
	FlatList,
} from 'react-native';
import PropTypes from 'prop-types';
import { color, fontSizes } from '~/styles/variables';
import { NixplayIcon } from 'nixplay-ui-kit';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { ifIphoneX } from 'react-native-iphone-x-helper';
import i18n from '~/locale/i18n';
import { Text } from './text';

const styles = StyleSheet.create({
	inputContainer: {
		marginBottom: 10,
	},
	button: {
		padding: 15,
		paddingTop: 10,
		paddingBottom: 10,
		borderWidth: 1,
		borderColor: color.grayLighter,
		borderRadius: 4,
		backgroundColor: color.white,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
	},
	inputError: {
		paddingLeft: 15,
		paddingRight: 15,
	},
	modal: {
		flex: 1,
		...ifIphoneX({
			paddingTop: 44,
		}, {}),
	},
	selectContainer: {
		...ifIphoneX({
			marginBottom: 34,
		}, {}),
	},
	modalHeader: {
		flexDirection: 'row',
		padding: 15,
		borderBottomWidth: 1,
		borderColor: color.grayLighter,
		alignItems: 'center',
		marginTop: 15,
	},
	modalBackButton: {
		color: color.blue,
	},
	modalHeaderText: {
		flex: 1,
		textAlign: 'center',
		// paddingLeft: 15,
		// paddingRight: 20,
	},
	selectOption: {
		padding: 12,
		paddingLeft: 16,
		paddingRight: 16,
		borderBottomWidth: 1,
		borderColor: color.grayLightest,
	},
	selectOptionSelected: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		backgroundColor: color.blueLight,
	},
});


class Picker extends Component {
	static propTypes = {
		value: PropTypes.any.isRequired,
		options: PropTypes.any.isRequired,
		onChange: PropTypes.func,
		fontWeight: PropTypes.string,
		fontStyle: PropTypes.string,
		size: PropTypes.string,
		style: PropTypes.any,
		placeholder: PropTypes.string,
		labelKey: PropTypes.string,
		valueKey: PropTypes.string,
		meta: PropTypes.object,
		disabled: PropTypes.bool,
	}

	static defaultProps = {
		onChange: () => {},
		fontWeight: 'Normal',
		fontStyle: 'normal',
		size: 'base',
		style: {},
		placeholder: '',
		labelKey: 'label',
		valueKey: 'value',
		meta: {},
		disabled: false,
	}

	constructor(props) {
		super(props);
		this.openModal = this.openModal.bind(this);
		this.closeModal = this.closeModal.bind(this);
	}

	state = {
		modalVisible: false,
	}

	openModal() {
		this.setState({ modalVisible: true });
	}

	closeModal() {
		this.setState({ modalVisible: false });
	}

	render() {
		const {
			fontWeight, fontStyle, size, placeholder, options, value, onChange, meta,
		} = this.props;
		const selected = options.find((o) => o[this.props.valueKey] === value);
		const opacity = selected ? 1.0 : 0.4;
		const fontColor = selected ? 'mistBlue05' : 'gray';
		return (
			<View style={styles.inputContainer}>
				<TouchableOpacity
					disabled={this.props.disabled}
					style={[styles.button, this.props.style]}
					onPress={() => this.openModal()}
				>
					<Text
						style={[{
							flex: 1,
							opacity,
							...(['ja'].indexOf(i18n.locale) > -1 && { height: 19 }),
						}]}
						fontWeight={fontWeight}
						fontStyle={fontStyle}
						fontSize={size}
						color={fontColor}
						numberOfLines={1}
						ellipsizeMode="tail"
					>
						{selected ? selected[this.props.labelKey] : placeholder}
					</Text>
					<Ionicons
						name="ios-arrow-down"
						style={{
							color: color.mistBlue05,
							fontSize: fontSizes.large,
							paddingLeft: 5,
						}}
					/>
				</TouchableOpacity>
				<Text
					color="red"
					fontSize={fontSizes.smaller(size, 1)}
					style={[styles.inputError,
						(!meta.touched || (meta.touched && !meta.error)) && { height: 0 },
					]}
				>
					{meta.error}
				</Text>
				<Modal
					visible={this.state.modalVisible}
					animationType="slide"
					onRequestClose={() => this.closeModal()}
				>
					<View style={styles.modal}>
						<View style={styles.modalHeader}>
							<NixplayIcon
								name="close"
								testID="Close"
								style={styles.modalBackButton}
								onPress={() => this.closeModal()}
							/>
							<Text
								style={styles.modalHeaderText}
								numberOfLines={1}
								ellipsizeMode="tail"
							>
								{placeholder}
							</Text>
						</View>
						<FlatList
							contentContainerStyle={styles.selectContainer}
							data={options}
							keyExtractor={(option) => option[this.props.valueKey]}
							renderItem={({ item }) => {
								const l = item[this.props.labelKey];
								const v = item[this.props.valueKey];
								return (
									<TouchableOpacity
										style={[styles.selectOption, v === value && styles.selectOptionSelected]}
										key={v}
										onPress={() => {
											onChange(v);
											this.closeModal();
										}}
									>
										<Text
											numberOfLines={2}
										>{l}
										</Text>
										{v === value && <Ionicons
											name="ios-checkmark"
											style={{
												fontSize: fontSizes[size] * 2,
												marginTop: -10,
												marginBottom: -10,
											}}
										/>}
									</TouchableOpacity>
								);
							}}
						/>
					</View>
				</Modal>
			</View>
		);
	}
}

export { Picker };
