import React from 'react'
import {
	ProductForm as ProductOptions,
	useSession,
	useLanguage,
	useOrder,
	useUtils
} from 'ordering-components/native'
import { ProductIngredient } from '../ProductIngredient'
import { ProductOption } from '../ProductOption'

import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager, Platform } from 'react-native'
import Icon from 'react-native-vector-icons/Feather';

import {
	ProductHeader,
	WrapHeader,
	TopHeader,
	WrapContent,
	ProductTitle,
	ProductDescription,
	ProductEditions,
	SectionTitle,
	WrapperIngredients,
	WrapperSubOption,
	ProductComment,
	ProductActions
} from './styles'
import { OButton, OIcon, OInput, OText } from '../shared'
import { ProductOptionSubOption } from '../ProductOptionSubOption'
import { NotFoundSource } from '../NotFoundSource'
import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
import { useTheme } from 'styled-components/native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'

const windowHeight = Dimensions.get('window').height;
const windowWidth = Dimensions.get('window').width

export const ProductOptionsUI = (props: any) => {
	const {
		navigation,
		editMode,
		isSoldOut,
		productCart,
		increment,
		decrement,
		showOption,
		maxProductQuantity,
		errors,
		handleSave,
		handleChangeIngredientState,
		handleChangeSuboptionState,
		handleChangeCommentState,
		productObject,
		onClose,
		businessSlug
	} = props

	const theme = useTheme();

	const [{ optimizeImage, parsePrice }] = useUtils()
	const [, t] = useLanguage()
	const [orderState] = useOrder()
	const [{ auth }] = useSession()
	const { product, loading, error } = productObject

	const { bottom } = useSafeAreaInsets();

	const isError = (id: number) => {
		let bgColor = theme.colors.white
		if (errors[`id:${id}`]) {
			bgColor = 'rgba(255, 0, 0, 0.05)'
		}
		if (isSoldOut || maxProductQuantity <= 0) {
			bgColor = 'hsl(0, 0%, 72%)'
		}
		return bgColor
	}

	const handleSaveProduct = () => {
		const isErrors = Object.values(errors).length > 0
		if (!isErrors) {
			handleSave && handleSave()
			return
		}
	}

	const handleRedirectLogin = (product: any) => {
		onClose()
		navigation.navigate('Home', { showAuth: true, product: { businessId: product?.businessId, id: product?.id, categoryId: product?.categoryId, slug: businessSlug } })
	}

	const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors).length > 0

	return (
		<>
			<ScrollView style={styles.mainContainer} showsVerticalScrollIndicator={false}>
				{!error && (
					<View style={{ paddingBottom: 80 }}>
						<WrapHeader>
							{loading && !product ? (
								<View style={styles.productHeaderSkeleton}>
									<Placeholder Animation={Fade} >
										<PlaceholderLine height={260} style={{ borderRadius: 0 }} width={windowWidth} />
									</Placeholder>
								</View>
							) : (
								<>
									<TopHeader>
										<View style={styles.headerItem}>
											<Icon
												name="x"
												size={26}
												style={{ color: theme.colors.white }}
												onPress={onClose}
											/>
										</View>
									</TopHeader>
									<ProductHeader
										source={{ uri: product?.images || productCart?.images }}
										resizeMode={'contain'}
										style={{ height: windowWidth, maxHeight: windowWidth }}
									/>
								</>
							)}
						</WrapHeader>
						<WrapContent>
							<ProductTitle>
								{loading && !product ? (
									<Placeholder Animation={Fade}>
										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
											<PlaceholderLine width={40} height={20} />
											<PlaceholderLine width={30} height={20} />
										</View>
									</Placeholder>
								) : (
									<View style={{ flexDirection: 'column', width: '100%' }}>
										<OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}>{product?.name || productCart.name}</OText>
										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
											{((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
												<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
													{
														((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
														&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
													}
													{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
														<>&nbsp;&#183;&nbsp;</>
													)}
													{product?.estimated_person
														&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
													}
												</OText>
											)}
										</View>
										<OText size={16} mBottom={7} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
									</View>
								)}
							</ProductTitle>
							{(product?.description || productCart?.description) && (
								<ProductDescription>
									<OText mBottom={7} style={{ ...theme.labels.small }} color={theme.colors.textSecondary}>{product?.description?.trim() || productCart?.description?.trim()}</OText>
								</ProductDescription>
							)}
							<ScrollView
								horizontal
								showsHorizontalScrollIndicator={false}
								contentContainerStyle={{ paddingBottom: 20 }}
							>
								{product?.tags?.map((tag: any) => (
									<View
										key={tag.id}
										style={styles.productTagWrapper}
									>
										{tag?.image ? (
											<OIcon
												url={optimizeImage(tag?.image, 'h_40,c_limit')}
												style={styles.productTagImageStyle}
											/>
										) : (
											<OIcon
												src={theme.images?.dummies?.product}
												style={styles.productTagImageStyle}
											/>
										)}
										<OText color={theme.colors.textSecondary} style={{ ...styles.productTagNameStyle, ...theme.labels.small}}>{tag.name}</OText>
									</View>
								))}
							</ScrollView>
							<View style={{ height: 16, backgroundColor: theme.colors.secundary, marginHorizontal: -40, marginBottom: 20 }} />
							{loading && !product ? (
								<>
									{[...Array(2)].map((item, i) => (
										<Placeholder key={i} style={{ marginBottom: 20 }} Animation={Fade}>
											<PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
											{[...Array(3)].map((item, i) => (
												<View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
													<PlaceholderLine height={30} width={10} style={{ marginBottom: 20 }} />
													<PlaceholderLine height={30} width={50} style={{ marginBottom: 20 }} />
													<PlaceholderLine height={30} width={30} style={{ marginBottom: 20 }} />
												</View>
											))}
										</Placeholder>
									))}
								</>
							) : (
								<ProductEditions>
									{product?.ingredients?.length > 0 && (
										<View style={styles.optionContainer}>
											<SectionTitle>
												<OText size={16}>{t('INGREDIENTS', 'Ingredients')}</OText>
											</SectionTitle>
											<WrapperIngredients style={{ backgroundColor: isSoldOut || maxProductQuantity <= 0 ? 'hsl(0, 0%, 72%)' : theme.colors.white }}>
												{product?.ingredients.map((ingredient: any) => (
													<ProductIngredient
														key={ingredient.id}
														ingredient={ingredient}
														state={productCart.ingredients[`id:${ingredient.id}`]}
														onChange={handleChangeIngredientState}
													/>
												))}
											</WrapperIngredients>
										</View>
									)}
									{product?.extras?.map((extra: any) => extra.options.map((option: any) => {
										const currentState = productCart.options[`id:${option.id}`] || {}
										return (
											<React.Fragment key={option.id}>
												{
													showOption(option) && (
														<View style={styles.optionContainer}>
															<ProductOption
																option={option}
																currentState={currentState}
																error={errors[`id:${option.id}`]}
															>
																<WrapperSubOption style={{ backgroundColor: isError(option.id) }}>
																	{
																		option.suboptions.map((suboption: any) => {
																			const currentState = productCart.options[`id:${option.id}`]?.suboptions[`id:${suboption.id}`] || {}
																			const balance = productCart.options[`id:${option.id}`]?.balance || 0
																			return suboption?.enabled ? (
																				<ProductOptionSubOption
																					key={suboption.id}
																					onChange={handleChangeSuboptionState}
																					balance={balance}
																					option={option}
																					suboption={suboption}
																					state={currentState}
																					disabled={isSoldOut || maxProductQuantity <= 0}
																				/>
																			) : null
																		})
																	}
																</WrapperSubOption>
															</ProductOption>
														</View>
													)
												}
											</React.Fragment>
										)
									}))}
									{!product?.hide_special_instructions && (
										<ProductComment>
											<SectionTitle>
												<OText style={theme.labels.middle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
											</SectionTitle>
											<OInput
												multiline
												placeholder={t('SPECIAL_COMMENT', 'Special comment')}
												value={productCart.comment}
												onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
												isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
												style={{ ...styles.comment, borderColor: theme.colors.border }}
											/>
										</ProductComment>
									)}
								</ProductEditions>
							)}
						</WrapContent>
					</View>
				)}
				{error && error.length > 0 && (
					<NotFoundSource
						content={error[0]?.message || error[0]}
					/>
				)}
			</ScrollView>
			{!loading && !error && product && (
				<ProductActions style={{ paddingBottom: bottom + 12 }}>
					{productCart && !isSoldOut && maxProductQuantity > 0 && (
						<View style={{ ...styles.quantityControl, borderColor: theme.colors.border }}>
							<TouchableOpacity
								onPress={decrement}
								disabled={productCart.quantity === 1 || isSoldOut}
							>
								<OIcon
									src={theme.images.general.minus}
									width={16}
									color={productCart.quantity === 1 || isSoldOut ? theme.colors.backgroundGray : theme.colors.primary}
								/>
							</TouchableOpacity>
							<OText size={20}>{productCart.quantity}</OText>
							<TouchableOpacity
								onPress={increment}
								disabled={maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || isSoldOut}
							>
								<OIcon
									src={theme.images.general.plus}
									width={16}
									color={maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || isSoldOut ? theme.colors.backgroundGray : theme.colors.primary}
								/>
							</TouchableOpacity>
						</View>
					)}
					<View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : '45%' }}>
						{productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
							<OButton
								onClick={() => handleSaveProduct()}
								imgRightSrc=''
								imgLeftSrc={undefined}
								text={`${orderState.loading ? t('LOADING', 'Loading') : editMode ? t('UPDATE', 'Update') : t('ADD_TO_CART', 'Add to Cart')}`}
								textStyle={{ color: saveErrors ? theme.colors.primary : theme.colors.white, fontSize: 12, }}
								style={{
									backgroundColor: saveErrors ? theme.colors.white : theme.colors.primary,
									opacity: saveErrors ? 0.3 : 1,
									...styles.actionButton
								}}
							/>
							// ${productCart.total ? parsePrice(productCart?.total) : ''}
						)}
						{auth && !orderState.options?.address_id && (
							orderState.loading ? (
								<OButton
									isDisabled
									text={t('LOADING', 'Loading')}
									imgRightSrc=''
								/>
							) : (
								<OButton
									onClick={navigation.navigate('AddressList')}
								/>
							)
						)}
						{(!auth || isSoldOut || maxProductQuantity <= 0) && (
							<OButton
								isDisabled={isSoldOut || maxProductQuantity <= 0}
								onClick={() => handleRedirectLogin(productCart)}
								text={isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', 'Sold out') : t('LOGIN_SIGNUP', 'Login/SignUp')}
								imgRightSrc=''
								textStyle={{ color: theme.colors.primary, fontSize: 10, fontWeight: '500' }}
								style={{ ...styles.actionButton, borderColor: theme.colors.primary, backgroundColor: theme.colors.white }}
							/>
						)}
					</View>
				</ProductActions>
			)}
		</>
	)
}

const styles = StyleSheet.create({
	mainContainer: {
		flex: 1,
		height: windowHeight,
	},
	headerItem: {
		overflow: 'hidden',
		borderRadius: 50,
		backgroundColor: '#B4B4B4',
		width: 32,
		height: 32,
		margin: 15,
		alignItems: 'center',
		justifyContent: 'center'
	},
	optionContainer: {
		marginBottom: 20
	},
	comment: {
		borderWidth: 1,
		borderRadius: 3,
		height: 100,
		alignItems: 'flex-start',
	},
	quantityControl: {
		flexDirection: 'row',
		flexBasis: '45%',
		justifyContent: 'space-between',
		alignItems: 'center',
		flex: 1,
		marginEnd: 25,
		borderRadius: 3,
		borderWidth: 1,
		paddingHorizontal: 10
	},
	btnBackArrow: {
		borderWidth: 0,
		color: '#FFF',
		backgroundColor: 'rgba(0,0,0,0.3)',
		borderRadius: 24,
		marginRight: 15,
	},
	productHeaderSkeleton: {
		flexDirection: 'row',
		width: '100%',
		position: 'relative',
		maxHeight: 260,
		height: 260,
		resizeMode: 'cover',
		minHeight: 200,
		zIndex: 0
	},
	actionButton: {
		borderRadius: 3,
		height: 42,
		paddingStart: 4,
		paddingEnd: 4,
		borderWidth: 1
	},
	productTagWrapper: {
		flexDirection: 'row',
		alignItems: 'center'
	  },
	productTagImageStyle: {
		width: 32,
		height: 32,
		borderRadius: 8,
		resizeMode: 'cover'
	},
	productTagNameStyle: {
		paddingHorizontal: 6,
		marginRight: 5
	}
})

export const ProductForm = (props: any) => {
	const productOptionsProps = {
		...props,
		UIComponent: ProductOptionsUI
	}

	return <ProductOptions {...productOptionsProps} />
}