import React, { useState } from 'react';
import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
import {
	BusinessController as BusinessSingleCard,
	useUtils,
	useOrder,
	useLanguage,
	useConfig,
	useToast,
	useSession,
	ToastType
} from 'ordering-components/native';
import { OIcon, OText } from '../shared';
import { Dimensions, StyleSheet, View } from 'react-native';
import { InView } from 'react-native-intersection-observer'
import { BusinessControllerParams } from '../../types';
import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
import ReactNativeHapticFeedback from "react-native-haptic-feedback";

import {
	BusinessHero,
	BusinessContent,
	BusinessInfo,
	Metadata,
	BusinessState,
	BusinessLogo,
	Reviews,
	RibbonBox,
	ReviewAndFavorite,
	OfferBox
} from './styles';
import { useTheme } from 'styled-components/native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
import FastImage from 'react-native-fast-image'
import { LottieAnimation } from '../LottieAnimation';
import { CardAnimation } from '../shared/CardAnimation';

function BusinessControllerPropsAreEqual(prevProps: any, nextProps: any) {
	return JSON.stringify(prevProps.business) === JSON.stringify(nextProps.business) &&
		prevProps.isBusinessOpen === nextProps.isBusinessOpen
}

const deliveryTypes = [1, 7]

export const BusinessControllerUI = React.memo((props: BusinessControllerParams) => {
	const {
		business,
		handleClick,
		navigation,
		isBusinessOpen,
		style,
		businessHeader,
		businessFeatured,
		businessLogo,
		businessReviews,
		businessDeliveryPrice,
		businessDeliveryTime,
		businessPickupTime,
		businessDistance,
		handleFavoriteBusiness,
		enableIntersection,
		getBusinessOffer
	} = props;

	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
	const [, { showToast }] = useToast()
	const [orderState] = useOrder();
	const [{ auth }] = useSession()
	const [configState] = useConfig();
	const [, t] = useLanguage();
	const theme = useTheme()
	const windowHeight = Dimensions.get('window').height
	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)

	const hideBusinessLogo = theme?.business_listing_view?.components?.business?.components?.logo?.hidden
	const hideBusinessFee = theme?.business_listing_view?.components?.business?.components?.fee?.hidden
	const hideBusinessTime = theme?.business_listing_view?.components?.business?.components?.time?.hidden
	const hideBusinessDistance = theme?.business_listing_view?.components?.business?.components?.distance?.hidden
	const hideBusinessReviews = theme?.business_listing_view?.components?.business?.components?.reviews?.hidden
	const hideBusinessFavorite = theme?.business_listing_view?.components?.business?.components?.favorite?.hidden
	const hideBusinessOffer = theme?.business_listing_view?.components?.business?.components?.offer?.hidden
	const hideBusinessHeader = theme?.business_listing_view?.components?.business?.components?.header?.hidden
	const hideBusinessFavoriteBadge = theme?.business_listing_view?.components?.business?.components?.featured_badge?.hidden

	const textSize = 12
	const cardHeight = windowHeight * 0.34

	const styles = StyleSheet.create({
		container: {
			marginVertical: 20,
			borderRadius: 7.6,
			width: '100%',
			position: 'relative',
			height: cardHeight
		},
		headerStyle: {
			borderTopLeftRadius: 7.6,
			borderTopRightRadius: 7.6,
		},
		businessLogo: {
			backgroundColor: 'white',
			width: 62,
			height: 62,
			borderRadius: 7.6,
			justifyContent: 'center',
			alignItems: 'center',
			marginTop: -32,
			shadowColor: '#000000',
			shadowOffset: { width: 0, height: 1 },
			shadowOpacity: 0.1,
			shadowRadius: 1,
			elevation: 2
		},
		businessStateView: {
			backgroundColor: '#DEE2E6',
			borderRadius: 50,
			height: 20,
			alignItems: 'center',
			justifyContent: 'center',
			paddingHorizontal: 8,
		},
		businessStateText: {
			textAlign: 'center',
		},

		starIcon: {
			marginHorizontal: 2,
			marginTop: -2,
		},
		featured: {
			position: 'absolute',
			padding: 8,
			backgroundColor: theme.colors.backgroundDark,
			opacity: 0.8,
			borderRadius: 10,
			left: 20,
			top: 10,
		},
		closed: {
		},
		bullet: {
			flexDirection: 'row',
			alignItems: 'center',
			justifyContent: 'flex-start',
		}
	});

	const types = ['food', 'laundry', 'alcohol', 'groceries'];

	const getBusinessType = () => {
		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
		const _types: any = [];
		types.forEach((type) => {
			if (business[type]) {
				_types.push(t(type.toUpperCase(), type));
			}
		});
		return _types.join(', ');
	};

	const vibrateApp = (impact?: string) => {
		const options = {
			enableVibrateFallback: true,
			ignoreAndroidSystemSettings: false
		};
		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
	}

	const handleBusinessClick = (selectedBusiness: any) => {
		vibrateApp()
		if (business?.open) handleClick && handleClick(selectedBusiness)
		else {
			if (configState?.configs?.preorder_status_enabled?.value === '1') {
				navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
				return
			}
			showToast(ToastType.Info, t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment'));
		}
	}

	const handleChangeFavorite = () => {
		if (auth) {
			handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
		} else {
			navigation && navigation.navigate('Login');
		}
	}

	const handleChangeInterSection = (inView: boolean) => {
		setIsIntersectionObserver(inView)
	}

	return (
		<View style={{ minHeight: 200 }}>
			{isIntersectionObserver ? (
				<CardAnimation
					style={[style, styles.container]}
					onClick={() => handleBusinessClick(business)}
				>
					{business?.ribbon?.enabled && (
						<RibbonBox
							bgColor={business?.ribbon?.color}
							colorText={lightenDarkenColor(business?.ribbon?.color)}
							borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
							isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
							isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
						>
							<OText
								size={10}
								weight={'400'}
								color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
								numberOfLines={2}
								ellipsizeMode='tail'
								lineHeight={13}
							>
								{business?.ribbon?.text}
							</OText>
						</RibbonBox>
					)}
					<BusinessHero>
						{!hideBusinessHeader && (
							<FastImage
								style={{ height: cardHeight * 0.66 }}
								source={(businessHeader || business?.header || typeof theme.images.dummies.businessHeader === 'string') ? {
									uri: optimizeImage(businessHeader || business?.header || theme.images.dummies.businessHeader, 'h_500,c_limit'),
									priority: FastImage.priority.normal,
								} : theme.images.dummies.businessHeader}
								resizeMode={FastImage.resizeMode.cover}
							/>
						)}
						{(businessFeatured ?? business?.featured) && !hideBusinessFavoriteBadge && (
							<View style={styles.featured}>
								<FontAwesomeIcon name="crown" size={26} color="gold" />
							</View>
						)}
						{!hideBusinessOffer && (
							!!getBusinessOffer((business?.offers)) &&
							<OfferBox
								isClosed={!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1')}
								isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}
							>
								<OText
									size={10}
									weight={'400'}
									color={theme.colors.textThird}
									numberOfLines={2}
									ellipsizeMode='tail'
									lineHeight={13}
								>{t('DISCOUNT', 'Discount')}{' '}{getBusinessOffer((business?.offers))}</OText>
							</OfferBox>
						)}
						<BusinessState isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}>
							{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
								<View style={styles.businessStateView}>
									<OText
										color={theme.colors.textThird}
										size={10}
										style={styles.businessStateText}>
										{t('PREORDER', 'PREORDER')}
									</OText>
								</View>
							)}
						</BusinessState>
					</BusinessHero>
					<BusinessContent>
						<BusinessInfo style={{ position: 'absolute', top: -26, left: 15 }}>
							{!hideBusinessLogo && (
								<BusinessLogo style={styles.businessLogo}>
									<FastImage
										style={{ width: 56, height: 56 }}
										source={(businessLogo || business?.logo || typeof theme.images.dummies.businessLogo === 'string') ? {
											uri: optimizeImage(businessLogo || business?.logo || theme.images.dummies.businessLogo, 'h_150,c_limit'),
											priority: FastImage.priority.normal,
										} : theme.images.dummies.businessLogo}
										resizeMode={FastImage.resizeMode.cover}
									/>
								</BusinessLogo>
							)}
						</BusinessInfo>
						<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5, alignItems: 'flex-start' }}>
							<OText
								size={textSize + 2}
								style={{ lineHeight: 18, marginBottom: 6, width: '90%' }}
								weight={'500'}
								numberOfLines={1}
								ellipsizeMode='tail'
							>
								{business?.name}
							</OText>
							{(!hideBusinessFavorite || !hideBusinessReviews) && (
								<ReviewAndFavorite>
									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && !hideBusinessReviews && (
										<Reviews>
											<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
											<OText size={10} style={{ lineHeight: 15 }}>
												{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
											</OText>
										</Reviews>
									)}
									{!hideBusinessFavorite && (
										<LottieAnimation
											type='favorite'
											onClick={handleChangeFavorite}
											initialValue={business?.favorite ? 0.5 : 0}
											toValue={business?.favorite ? 0 : 0.5}
											disableAnimation={!auth}
											iconProps={{ color: theme.colors.danger5, size: 18 }}
											isActive={business?.favorite}
										/>
									)}
								</ReviewAndFavorite>
							)}
						</View>
						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3, fontFamily: undefined }} numberOfLines={1}>
							{business?.address}
						</OText>
						<Metadata>
							{!isBusinessOpen ? (
								<View style={styles.closed}>
									<OText size={10} color={theme.colors.red}>
										{t('CLOSED', 'Closed')}
									</OText>
								</View>
							) : (
								<View style={styles.bullet}>
									{deliveryTypes.includes(orderState?.options?.type) && !hideBusinessFee && (
										<OText size={textSize} color={theme.colors.textSecondary}>
											{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
										</OText>
									)}
									{!hideBusinessTime && (
										<OText size={textSize} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
											deliveryTypes.includes(orderState?.options?.type)
												? (businessDeliveryTime ?? business?.delivery_time)
												: (businessPickupTime ?? business?.pickup_time),
										)} \u2022 `}</OText>
									)}
									{!hideBusinessDistance && (
										<OText size={textSize} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
									)}
								</View>
							)}
						</Metadata>
					</BusinessContent>
				</CardAnimation>
			) : (
				<Placeholder
					Animation={Fade}
					style={{ marginBottom: 20 }}>
					<View style={{ width: '100%' }}>
						<PlaceholderLine
							height={200}
							style={{ marginBottom: 20, borderRadius: 25 }}
						/>
						<View style={{ paddingHorizontal: 10 }}>
							<View
								style={{
									flexDirection: 'row',
									justifyContent: 'space-between',
								}}>
								<PlaceholderLine
									height={25}
									width={40}
									style={{ marginBottom: 10 }}
								/>
								<PlaceholderLine
									height={25}
									width={20}
									style={{ marginBottom: 10 }}
								/>
							</View>
							<PlaceholderLine
								height={20}
								width={30}
								style={{ marginBottom: 10 }}
							/>
							<PlaceholderLine
								height={20}
								width={80}
								style={{ marginBottom: 10 }}
							/>
						</View>
					</View>
				</Placeholder>
			)}
		</View>
	);
}, BusinessControllerPropsAreEqual);

export const BusinessController = (props: BusinessControllerParams) => {
	const BusinessControllerProps = {
		...props,
		UIComponent: BusinessControllerUI,
	};

	return <BusinessSingleCard {...BusinessControllerProps} />;
};