import React from 'react';
import { TouchableOpacity, Platform } from 'react-native';
import PropTypes from 'prop-types';
import { NixplayIcon } from 'nixplay-ui-kit';
import DeviceInfo from 'react-native-device-info';
import { color, fontSizes } from '~/styles/variables';
import setTestID from '~/test/testUtils';
import { Text } from './text';

import { color as basicColor } from '~/styles/variables'

const isAndroid = Platform.OS !== 'ios';
const PREFIX_TESTID = 'btn';

const colorStyles = {
	primary: {
		touchable: {
			backgroundColor: basicColor.wrikeBg,
		},
		text: {
			color: basicColor.wrikeGreen2,
		},
	},
	link: {
		touchable: {
			backgroundColor: 'transparent',
			padding: 0,
			paddingTop: 0,
			paddingBottom: 0,
		},
		text: {},
	},
	disabled: {
		touchable: {
			backgroundColor: basicColor.wrikeGreen1,
		},
		text: {
			color: basicColor.wrikeGreen2,
		},
	},
};

const sizeStyles = {
	base: {
		padding: fontSizes.base,
		paddingTop: fontSizes.base * 0.625,
		paddingBottom: fontSizes.base * 0.625,
	},
};

export const Button = (props) => {
	const {
		testID, fontWeight, fontStyle, size, text, type, disabled, color: textColor, icon, languageCode, ...other
	} = props;
	const colorStyle = colorStyles[type] || colorStyles.primary;
	const sizeStyle = sizeStyles[size] || sizeStyles.base;
	const devId = DeviceInfo.getDeviceId();
	const paddingTop = (languageCode.indexOf('ja') === 0 && devId.indexOf() !== 'iPhone6' && !isAndroid)
		? { paddingTop: 5 } : {};
	return (
		<TouchableOpacity
			{...other}
			{...setTestID(`${PREFIX_TESTID}${testID}`)}
			disabled={disabled}
			activeOpacity={0.5}
			style={[{
				borderRadius: 4,
				justifyContent: 'center',
				alignItems: 'center',
			}, sizeStyle, colorStyle.touchable, props.style,
			disabled && colorStyles.disabled.touchable,
			icon && { flexDirection: 'row' },
			]}
		>
			{icon && <NixplayIcon
				name={icon}
				testID={`TextButtonIcon-${icon}`}
				style={{ color: 'white', right: 10 }}
			/>}
			<Text
				style={[
					colorStyle.text,
					disabled && colorStyles.disabled.text,
					type === 'link' && {
						color: color[textColor],
						textAlign: 'center',
					},
					type !== 'link' && paddingTop,
				]}
				fontWeight={fontWeight}
				fontStyle={fontStyle}
				fontSize={size}
				numberOfLines={props.setNumberOfLines}
				ellipsizeMode="tail"
				// {...props.innerTextProps}
			>
				{text}
			</Text>
		</TouchableOpacity>
	);
};

Button.propTypes = {
	fontWeight: PropTypes.string,
	fontStyle: PropTypes.string,
	size: PropTypes.string,
	type: PropTypes.string,
	disabled: PropTypes.bool,
	style: PropTypes.any,
	text: PropTypes.string,
	color: PropTypes.string,
	testID: PropTypes.string,
	setNumberOfLines: PropTypes.number,
	icon: PropTypes.string,
	languageCode: PropTypes.string,
};

Button.defaultProps = {
	fontWeight: 'SemiBold',
	fontStyle: 'normal',
	size: 'base',
	type: 'primary',
	disabled: false,
	style: {},
	text: '',
	color: 'black',
	testID: '',
	setNumberOfLines: 1,
	icon: null,
	languageCode: 'en',
};
