/* Dependencies */
import React, { Fragment, useState } from 'react'
import { StyleSheet, Text, View } from 'react-native'

/* Libraries */
import * as Clipboard from 'expo-clipboard'
import { Snackbar, Surface, useTheme } from 'react-native-paper'

/* Types */
interface Info {
	description: string
	title: string
	onPress?: ( item: Info ) => void
}
type Props = {
	title: string
	data: Info[]
	onPress?: ( item: Info ) => void
}

const BlockInfo = ({ title, data, onPress }: Props) => {
	/* Styles */
	const { colors } = useTheme()
	const styles = StyleSheet.create({
		container: {
			backgroundColor: colors.background,
			borderRadius: 15,
			display: 'flex',
			elevation: 4,
			marginBottom: 20,
			padding: 10
		},
		data: {
			color: colors.text,
			flex: 1,
			textAlign: 'right',
			fontWeight: 'bold'
		},
		dataContainer: {
			display: 'flex',
			flex: 1,
			flexDirection: 'row',
			padding: 3
		},
		dataTitle: {
			color: colors.text,
			marginRight: 15
		},
		separator: {
			backgroundColor: colors.text,
			height: 1,
			marginBottom: 10,
			marginTop: 10
		},
		snackbar: {
			backgroundColor: colors.primary,
			bottom: 0,
			position: 'absolute',
			right: 0,
			width: 175
		},
		snackbarMessage: {
			color: colors.accent
		},
		title: {
			color: colors.text,
			fontSize: 16,
			fontWeight: 'bold',
			marginTop: 10
		}
	})

	/* States */
	const [visible, setVisible] = useState(false)

	return (<Surface
		key={title}
		style={styles.container}>
		<View>
			<Text style={styles.title}>
				{title}
			</Text>
		</View>
		<View style={styles.separator} />
		{data.map((item, index) => (<Fragment key={index}>
			<View style={styles.dataContainer}>
				<Text style={styles.dataTitle}>
					{item.title}
				</Text>
				<Text
					onPress={() =>
					{
						if (item.onPress) {
							item.onPress(item)
						} else if (onPress) {
							onPress(item)
						} else {
							if (item.description) {
								Clipboard.setString(item.description)
								setVisible(true)
							}
						}
					}}
					style={styles.data}>
					{item.description?.includes('undefined')
						? undefined
						: item.description}
				</Text>
			</View>
		</Fragment>))}
		<Snackbar
			duration={250}
			onDismiss={() => setVisible(false)}
			style={styles.snackbar}
			visible={visible}>
			<Text style={styles.snackbarMessage}>
				{'Campo Copiado!'}
			</Text>
		</Snackbar>
	</Surface>)
}

BlockInfo.displayName = 'Block.Info'

export default BlockInfo