import React, { useState, useRef, useEffect } from 'react';
import { TouchableOpacity, View, Vibration } from 'react-native';
import { useOrder, useLanguage, useUtils, useConfig, useEvent } from 'ordering-components/native';
import { useTheme } from 'styled-components/native';
import {
	BIContainer,
	BIHeader,
	BIContent,
	BIInfo,
	BIContentInfo,
	BITotal,
	BIActions,
	PriceContainer
} from './styles';
import { OAlert, OButton, OIcon, OText } from '../shared';

export const BusinessItemAccordion = (props: any) => {
	const {
		cart,
		moment,
		singleBusiness,
		handleClearProducts,
		handleClickCheckout,
		checkoutButtonDisabled,
		isMultiCheckout,
		isFromUpselling,
		changeActiveState,
		isActive,
		isGiftCart
	} = props

	const [orderState] = useOrder();
	const [, t] = useLanguage();
	const [{ parsePrice }] = useUtils();
	const [{ configs }] = useConfig()
	const theme = useTheme();
	const [events] = useEvent()

	const isCartPending = cart?.status === 2
	const isClosed = !cart?.valid_schedule
	const isProducts = cart?.products?.length
	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'

	const [viewedCart, setViewedCart] = useState<any>(null)

	useEffect(() => {
		const cartsArray = Object.values(orderState?.carts)
		const cartsLength = cartsArray.filter((cart: any) => cart.products.length > 0).length ?? 0
		if (cartsLength === 1) {
			changeActiveState && changeActiveState(!isClosed, cart?.uuid)
		}
	}, [orderState?.carts?.length, isClosed])

	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
		if (item?.type === 1)
			return acc = acc + item?.summary?.tax
		return acc = acc
	}, cart?.subtotal)

	const bgStyle = (subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary
	const textStyles = (subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.black : theme.colors.white

	useEffect(() => {
		if (isActive && !isFromUpselling) {
			if (cart?.uuid !== viewedCart?.uuid) {
				setViewedCart(cart)
				events.emit('cart_viewed', cart)
			}
		}
	}, [isActive, viewedCart])

	const handleGoToStore = () => {
		Vibration.vibrate(100)
		props.onNavigationRedirect('Business', { store: cart?.business?.slug })
	}

	return (
		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
			<BIHeader
				isClosed={isClosed}
				onPress={() => !isClosed ? changeActiveState && changeActiveState(!isClosed, cart?.uuid) : isClosed}
				activeOpacity={1}
			>
				<BIInfo>
					<BIContentInfo>
						<OText size={16} lineHeight={24} weight={'600'}>{cart?.business?.name}</OText>
						<View style={{ flexDirection: 'row' }}>
							{props.onNavigationRedirect && !isClosed && !isGiftCart && (
								<>
									<TouchableOpacity onPress={() => handleGoToStore()}>
										<OText color={theme.colors.primary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
									</TouchableOpacity>
								</>
							)}
							{!isCartPending && (
								<>
									{!isGiftCart && (
										<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
									)}
									<OAlert
										title={t('DELETE_CART', 'Delete Cart')}
										message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
										onAccept={() => handleClearProducts()}
									>
										<OText size={12} lineHeight={18} color={theme.colors.primary} style={{ textDecorationLine: 'underline' }}>{t('CLEAR_CART', 'Clear cart')}</OText>
									</OAlert>
								</>
							)}
							{isBusinessChangeEnabled && props.handleChangeStore && !isGiftCart && (
								<>
									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
									<TouchableOpacity
										onPress={props.handleChangeStore}
									>
										<OText
											size={12}
											lineHeight={18}
											color={theme.colors.primary}
											style={{ textDecorationLine: 'underline' }}
										>
											{t('CHANGE_STORE', 'Change store')}
										</OText>
									</TouchableOpacity>
								</>
							)}
						</View>
					</BIContentInfo>
				</BIInfo>

				{/* {!isClosed && !!isProducts && cart?.valid_products && cart?.total > 0 && (
          <BITotal>
            <OText color='#000'>{parsePrice(cart?.total)}</OText>
            <OText>{t('CART_TOTAL', 'Total')}</OText>
          </BITotal>
        )} */}

				{isClosed && (
					<BITotal>
						<OText color={theme.colors.red} size={12}>{t('CLOSED', 'Closed')} {moment}</OText>
					</BITotal>
				)}

				{!isClosed && !isProducts && (
					<BITotal>
						<OText>{t('NO_PRODUCTS', 'No products')}</OText>
					</BITotal>
				)}

				<BIActions>

					{!isClosed && !!isProducts && (
						<>
							<OIcon src={!isActive ? theme.images.general.drop_down : theme.images.general.drop_up} width={12} />
						</>
					)}
				</BIActions>
			</BIHeader>
			{!isActive && !isClosed && !!isProducts && !isMultiCheckout && (
				<PriceContainer>
					<OText>{parsePrice(cart?.total)}</OText>
					{cart?.valid_products && (
						<OButton
							onClick={handleClickCheckout}
							textStyle={{ color: textStyles, textAlign: 'center', flex: 1 }}
							style={{ width: 180, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
							text={t('CHECKOUT', 'Checkout')}
							bgColor={bgStyle}
							borderColor={bgStyle}
							isDisabled={checkoutButtonDisabled}
						/>
					)}
				</PriceContainer>
			)}

			<BIContent style={{ display: isActive ? 'flex' : 'none' }}>
				{props.children}
			</BIContent>
		</BIContainer>
	)
}