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

/* Libraries */
import { Button } from 'react-native-paper'

/* Types */
type Props = {
	setRandomPass: React.Dispatch<React.SetStateAction<number[]>>
	setText: React.Dispatch<React.SetStateAction<string>>
	text: string
}

const PadPassword = ({ setRandomPass, setText, text }: Props) => {
	/* States */
	const [randPass, setRandPass] = useState<number[]>([])

	/* Functions */
	const _rand = (maxLimit: number = 10) => {
		let pas: number[] = []
		let rand = 0
		while (pas.length !== 10) {
			rand = Math.random() * maxLimit
			rand = Math.floor(rand)
			if (pas.indexOf(rand) === -1) {
				pas = [...pas, rand]
			}
		}
		setRandPass(pas)
		setRandomPass(pas)
	}

	const _concat = (value: string) => {
		setText(`${text}${value}`)
	}

	/* Hooks */
	useEffect(() => {
		_rand()
	}, [])

	return (<View style={styles.container}>
		<View style={styles.row}>
			<Button
				mode={'contained'}
				onPress={() => _concat('0')}
				style={styles.button}>
				{`${randPass[0]} ou ${randPass[1]}`}
			</Button>
			<Button
				mode={'contained'}
				onPress={() => _concat('1')}
				style={styles.button}>
				{`${randPass[2]} ou ${randPass[3]}`}
			</Button>
			<Button
				mode={'contained'}
				onPress={() => _concat('2')}
				style={styles.button}>
				{`${randPass[4]} ou ${randPass[5]}`}
			</Button>
		</View>
		<View style={styles.row}>
			<Button
				mode={'contained'}
				onPress={() => _concat('3')}
				style={styles.button}>
				{`${randPass[6]} ou ${randPass[7]}`}
			</Button>
			<Button
				mode={'contained'}
				onPress={() => _concat('4')}
				style={styles.button}>
				{`${randPass[8]} ou ${randPass[9]}`}
			</Button>
			<Button
				mode={'contained'}
				onPress={() => setText('')}
				style={styles.button}>
				{`Limpar`}
			</Button>
		</View>
	</View>)
}

const styles = StyleSheet.create({
	container: {
		marginLeft: 5,
		marginRight: 5,
		marginTop: 10
	},
	button: {
		flex: 1,
		height: 45,
		marginRight: 3,
		marginTop: 3,
		paddingTop: 7
	},
	row: {
		flexDirection: 'row',
		flexGrow: 1
	}
})

PadPassword.displayName = 'Pad.Password'

export default PadPassword