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

/* Libraries */
import { Surface, useTheme, TouchableRipple } from 'react-native-paper'
import Icon from 'react-native-vector-icons/Ionicons'

/* Types */
interface Option {
	disabled?: boolean
	icon: string
	key: string
	title: string
}
type Props = {
	backgroundColor?: string
	iconStyle?: {
		disabledColor?: string,
		focusedColor?: string,
		unfocusedColor?: string,
	},
	onTabClick: () => void
	options: Option[]
	setTab: React.Dispatch<React.SetStateAction<string>>
	tab: string
	textStyle?: {
		disabledColor?: string,
		focusedColor?: string,
		unfocusedColor?: string,
	}
}

const TabBottom = ({
	backgroundColor,
	iconStyle,
	onTabClick = () => {},
	options,
	setTab,
	tab,
	textStyle
}: Props) => {
	/* Styles */
	const { colors } = useTheme({
		colors: {
			accent: '#f9f9f9',
			disabled: '#d9d4d4'
		}
	})
	const styles = StyleSheet.create({
		container: {
			backgroundColor: backgroundColor ?? colors.primary,
			alignSelf: 'center',
			borderRadius: 15,
			bottom: 15,
			display: 'flex',
			height: 60,
			flexDirection: 'row',
			position: 'absolute',
			width: '95%'
		},
		text: {
			fontSize: 12
		},
		view: {
			alignItems: 'center',
			display: 'flex',
			flex: 1,
			justifyContent: 'center'
		},
		wrapper: {
			alignItems: 'center',
			display: 'flex',
			flex: 1,
			justifyContent: 'center'
		}
	})

	return (
		<Surface style={styles.container}>
			{options.map((item) => (<Fragment key={item.key}>
				<TouchableRipple
					hasTVPreferredFocus={undefined} // TODO: Fix this
					tvParallaxProperties={undefined} // TODO: Fix this
					borderless
					disabled={item.disabled}
					onPress={() => {
						setTab(item.key)
						onTabClick()
					}}
					style={styles.wrapper}>
					<View style={styles.view}>
						<Icon
							color={
								item.disabled
									? (tab === item.key)
										? iconStyle?.focusedColor ?? colors.accent
										: iconStyle?.unfocusedColor ?? colors.disabled
									: iconStyle?.disabledColor ?? colors.disabled
							}
							name={item.icon}
							size={16} />
						<Text
							style={{
								...styles.text,
								color: item.disabled
									? (tab === item.key)
										? textStyle?.focusedColor ?? colors.accent
										: textStyle?.unfocusedColor ?? colors.disabled
									: textStyle?.disabledColor ?? colors.disabled
							}}>
							{item.title}
						</Text>
					</View>
				</TouchableRipple>
			</Fragment>
			))}
		</Surface >)
}

TabBottom.displayName = 'Tab.Bottom'

export default TabBottom