import React, { Component } from 'react';
import {
	TouchableOpacity,
	StyleSheet,
} from 'react-native';
import { NixplayIcon } from 'nixplay-ui-kit';
// import _ from 'lodash';
import { color, transparentize } from '~/styles/variables';


import PropTypes from 'prop-types';

const styles = StyleSheet.create({
	shadow: {
		textShadowRadius: 2,
		textShadowOffset: {
			width: 0,
			height: 1,
		},
		textShadowColor: transparentize(color.black, 50),
	},
});

export class ClickableIcon extends Component {
	static propTypes = {
		style: PropTypes.any,
		iconName: PropTypes.string,
		iconSize: PropTypes.number,
		iconColor: PropTypes.string,
		func: PropTypes.any,
		withShadow: PropTypes.bool,
	};

	static defaultProps = {
		style: {},
		iconName: null,
		iconSize: 24,
		iconColor: 'white',
		func: null,
		withShadow: true,
	};

	render() {
		// const isFunctionAvailable = typeof this.props.func === 'function' ? _.debounce(this.props.func, 1000) : null;
		return (
			<TouchableOpacity style={{ textAlign: 'center' }} onPress={this.props.func} disabled={this.props.func === null}>
				<NixplayIcon
					name={this.props.iconName}
					size={this.props.iconSize}
					style={[this.props.withShadow && styles.shadow, this.props.style]}
					color={this.props.iconColor}
				/>
			</TouchableOpacity>
		);
	}
}
