import React from 'react'
import {
    useLanguage,
    useSession,
    useOrder,
    useConfig,
    useUtils
} from 'ordering-components/native';
import { Platform, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
import { OIcon, OModal, OText } from '../../../shared'
import { useTheme } from 'styled-components/native';
import { OrderProgress } from '../../../OrderProgress';
import { useIsFocused } from '@react-navigation/native';
import {
	Search,
	OrderControlContainer,
	AddressInput,
	WrapMomentOption,
	HeaderWrapper,
	ListWrapper,
	FeaturedWrapper,
	FarAwayMessage,
	AddressInputContainer,
	PreorderInput,
	OrderTypesContainer
} from './styles';
import { BusinessFeaturedController } from '../../../BusinessFeaturedController';
import { HighestRatedBusinesses } from '../../../HighestRatedBusinesses';
import { PageBanner } from '../../../PageBanner';
import { NotFoundSource } from '../../../NotFoundSource';
import { BusinessTypeFilter } from '../../../BusinessTypeFilter';
import { OrderTypeSelector } from '../../../OrderTypeSelector';
import { getTypesText } from '../../../../utils';

import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Ionicons from 'react-native-vector-icons/Ionicons'
import { CitiesControl } from '../../../CitiesControl';

export const FlatListBusinessListHeader = (props: any) => {
    const {
        navigation,
        businessesList,
        handleChangeBusinessType,
        handleBusinessClick,
        businessId,
        isGuestUser,
        citiesState,
        enabledPoweredByOrdering,
        orderTypeValue,
        setIsOpenCities,
        allCitiesDisabled,
        featuredBusiness,
        favoriteIds,
        setFavoriteIds,
        setOrderTypeValue,
        isFarAway,
        isOpenCities,
        handleChangeCity
    } = props

    const theme = useTheme()
    const [{ user, auth }] = useSession()
    const [orderState] = useOrder()
    const [{ configs }] = useConfig()
    const isFocused = useIsFocused()
    const [, t] = useLanguage()
    const [{ parseDate }] = useUtils();
    const { top } = useSafeAreaInsets();

    const hideCities = (theme?.business_listing_view?.components?.cities?.hidden || orderState?.options?.type !== 2 || allCitiesDisabled) ?? true
    const hideHero = theme?.business_listing_view?.components?.business_hero?.hidden
    const hidePreviousOrders = theme?.business_listing_view?.components?.previous_orders_block?.hidden
    const hideHighestBusiness = theme?.business_listing_view?.components?.highest_rated_business_block?.hidden
    const isAllCategoriesHidden = theme?.business_listing_view?.components?.categories?.hidden
    const bgHeader = theme?.business_listing_view?.components?.business_hero?.components?.image
    const bgHeaderHeight = theme?.business_listing_view?.components?.business_hero?.components?.style?.height
    const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'

    const chewOrderTypes = [{ name: t('DELIVERY', 'Delivery').toUpperCase(), value: 1 }, { name: t('PICKUP', 'Pickup').toUpperCase(), value: 2 }]
    const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
    const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
        Number(configs?.max_days_preorder?.value) > 0
    const configTypes =
        configs?.order_types_allowed?.value
            .split('|')
            .map((value: any) => Number(value)) || [];

    const styles = StyleSheet.create({
        container: {
            marginBottom: 0,
        },
        welcome: {
            flex: 1,
            flexDirection: 'row',
        },
        inputStyle: {
            backgroundColor: theme.colors.inputDisabled,
            flex: 1,
        },
        wrapperOrderOptions: {
            width: '100%',
            flexDirection: 'row',
            justifyContent: 'center',
            marginBottom: 10,
            zIndex: 100,
        },
        borderStyle: {
            borderColor: theme.colors.backgroundGray,
            borderWidth: 1,
            borderRadius: 10,
        },
        searchInput: {
            fontSize: 16,
            backgroundColor: theme.colors.white,
            paddingLeft: 10,
            paddingTop: 7
        },
        iconStyle: {
            fontSize: 18,
            color: theme.colors.warning5,
            marginRight: 8
        },
        farAwayMsg: {
            paddingVertical: 6,
            paddingHorizontal: 20
        },
        inputContainerStyles: {
            backgroundColor: theme.colors.white,
            borderColor: theme.colors.backgroundGray,
            borderWidth: 1,
        },
        buttonCityStyle: {
            backgroundColor: theme.colors.white,
            borderColor: theme.colors.backgroundGray,
            borderRadius: 8,
            marginHorizontal: 20,
            minHeight: 45,
            paddingVertical: 5,
            paddingHorizontal: 20,
            borderWidth: 1,
            justifyContent: 'center'
        },
        businessSkeleton: {
            borderRadius: 8,
            marginRight: 20,
            width: 56,
            height: 56
        },
    });

    const handleMomentClick = () => {
        if (isPreorderEnabled) {
            navigation.navigate('MomentOption')
        }
    }

    return (
        <>
            {enabledPoweredByOrdering && auth && (
                <View style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', top: 20 }}>
                    <OText>
                        Powered By Ordering.co
                    </OText>
                </View>
            )}
            <View style={{
                height: !isPreOrderSetting && isChewLayout ? 150 : isChewLayout ? 200 : isFarAway ? 150 : 100,
                marginTop: 0,
                backgroundColor: isChewLayout ? theme?.colors?.chew : theme.colors?.white
            }}
            >
                {isChewLayout && (
                    <View style={{ marginTop: 30, paddingHorizontal: 30, flexDirection: 'row', justifyContent: 'space-between' }}>
                        <OText size={24} weight={700} color={theme.colors?.white}>
                            {t('WELCOME', 'Welcome')} {user?.name}
                        </OText>
                    </View>
                )}
                <Search isChewLayout={isChewLayout}>
                    <AddressInput
                        isChewLayout={isChewLayout}
                        onPress={() =>
                            auth
                                ? navigation.navigate('AddressList', { isFromBusinesses: true })
                                : navigation.navigate('AddressForm', {
                                    address: orderState.options?.address,
                                    isFromBusinesses: true,
                                    isGuestUser: isGuestUser
                                })
                        }>
                        <AddressInputContainer isChewLayout={isChewLayout}>
                            <OIcon
                                src={theme.images.general.pin}
                                color={theme.colors.disabled}
                                width={16}
                                style={{ marginRight: isChewLayout ? 0 : 10 }}
                            />
                            <OText size={12} numberOfLines={1} style={{ flex: 1 }}>
                                {orderState?.options?.address?.address || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
                            </OText>
                            {!isChewLayout && (
                                <OIcon
                                    src={theme.images.general.arrow_down}
                                    width={10}
                                    style={{ marginStart: 8 }}
                                />
                            )}
                        </AddressInputContainer>
                    </AddressInput>
                </Search>
                {isFarAway && !isChewLayout && (
                    <FarAwayMessage style={styles.farAwayMsg}>
                        <Ionicons name='md-warning-outline' style={styles.iconStyle} />
                        <OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
                    </FarAwayMessage>
                )}
                {!isChewLayout ? (
                    <OrderControlContainer>
                        <View style={styles.wrapperOrderOptions}>
                            {isPreOrderSetting && (
                                <WrapMomentOption
                                    onPress={() => handleMomentClick()}>
                                    <OText
                                        size={12}
                                        numberOfLines={1}
                                        ellipsizeMode="tail"
                                        color={theme.colors.textSecondary}>
                                        {orderState.options?.moment
                                            ? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
                                            : t('ASAP_ABBREVIATION', 'ASAP')}
                                    </OText>
                                    {isPreorderEnabled && (
                                        <OIcon
                                            src={theme.images.general.arrow_down}
                                            width={10}
                                            style={{ marginStart: 8 }}
                                        />
                                    )}
                                </WrapMomentOption>
                            )}
                            <WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes, setOrderTypeValue })}>
                                <OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}</OText>
                                <OIcon
                                    src={theme.images.general.arrow_down}
                                    width={10}
                                    style={{ marginStart: 8 }}
                                />
                            </WrapMomentOption>
                        </View>
                    </OrderControlContainer>
                ) : (
                    <>
                        {isPreOrderSetting && (
                            <View style={{ paddingHorizontal: 30 }}>
                                <PreorderInput
                                    isChewLayout={isChewLayout}
                                    onPress={() => handleMomentClick()}
                                >
                                    <OText color={theme.colors.textSecondary}>
                                        {orderState.options?.moment
                                            ? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
                                            : t('ASAP_ABBREVIATION', 'ASAP')}</OText>
                                </PreorderInput>
                            </View>
                        )}
                    </>
                )}
            </View>
            {!isChewLayout ? (
                <>
                    {!hideHero ? (
                        <HeaderWrapper
                            source={bgHeader ? { uri: bgHeader } : theme.images.backgrounds.business_list_header}
                            style={{ paddingTop: top + 20 }}
                            resizeMode='cover'
                            bgHeaderHeight={bgHeaderHeight}
                        >
                            {!auth && (
                                <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 20, paddingVertical: 20 }}>
                                    <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
                                </TouchableOpacity>
                            )}
                        </HeaderWrapper>
                    ) : (
                        <>
                            {!auth && (
                                <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 20, paddingVertical: 20 }}>
                                    <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
                                </TouchableOpacity>
                            )}
                        </>
                    )}
                </>
            ) : (
                <OrderTypesContainer>
                    <OrderTypeSelector
                        handleChangeBusinessType={handleChangeBusinessType}
                        isChewLayout
                        chewOrderTypes={chewOrderTypes}
                        handleChangeType={setOrderTypeValue}
                    />
                </OrderTypesContainer>
            )}

            {!hideCities && orderTypeValue === 2 && (
                <View style={{ marginTop: 20 }}>
                    <TouchableOpacity
                        style={styles.buttonCityStyle}
                        onPress={() => setIsOpenCities(true)}
                        disabled={orderState?.loading}
                    >
                        <OText size={18} color={theme.colors.backgroundGray} weight='bold' style={{ textAlign: 'center' }}>
                            {citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
                        </OText>
                    </TouchableOpacity>
                </View>
            )}
            {!hidePreviousOrders && (
                <OrderProgress
                    {...props}
                    isFocused={isFocused}
                />
            )}
            {
                !businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
                    <FeaturedWrapper>
                        <OText size={16} style={{ marginLeft: 20 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
                        <ScrollView
                            showsHorizontalScrollIndicator={false}
                            nestedScrollEnabled
                            horizontal
                            contentContainerStyle={{ paddingHorizontal: 20 }}
                        >
                            {featuredBusiness.map((bAry: any, idx: number) => (
                                <View key={'f-listing_' + idx}>
                                    <BusinessFeaturedController
                                        business={bAry[0]}
                                        isBusinessOpen={bAry[0]?.open}
                                        handleCustomClick={handleBusinessClick}
                                        orderType={orderState?.options?.type}
                                    />
                                    {bAry.length > 1 && (
                                        <BusinessFeaturedController
                                            business={bAry[1]}
                                            isBusinessOpen={bAry[1]?.open}
                                            handleCustomClick={handleBusinessClick}
                                            orderType={orderState?.options?.type}
                                        />
                                    )}
                                </View>
                            ))}
                        </ScrollView>
                    </FeaturedWrapper>
                )
            }
            {!isChewLayout && !hideHighestBusiness && (
                <>
                    <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
                    {
                        !businessId && !props.franchiseId && (
                            <HighestRatedBusinesses
                                propsToFetch={props.propsToFetch}
                                onBusinessClick={handleBusinessClick}
                                navigation={navigation}
                                favoriteIds={favoriteIds}
                                setFavoriteIds={setFavoriteIds}
                            />
                        )
                    }
                </>
            )}
            <PageBanner position='app_business_listing' navigation={navigation} />
            <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />

            <ListWrapper style={{ paddingHorizontal: 20 }}>
                {!businessId && !isAllCategoriesHidden && (
                    <BusinessTypeFilter
                        images={props.images}
                        businessTypes={props.businessTypes}
                        defaultBusinessType={props.defaultBusinessType}
                        handleChangeBusinessType={handleChangeBusinessType}
                    />
                )}
                {!businessesList.loading && businessesList.businesses.length === 0 && businessesList?.fetched && (
                    <NotFoundSource
                        content={t(
                            'NOT_FOUND_BUSINESSES',
                            'No businesses to delivery / pick up at this address, please change filters or change address.',
                        )}
                    />
                )}
            </ListWrapper>
            <OModal
                open={isOpenCities}
                onClose={() => setIsOpenCities(false)}
                title={t('SELECT_A_CITY', 'Select a city')}
            >
                <CitiesControl
                    cities={citiesState?.cities}
                    onClose={() => setIsOpenCities(false)}
                    handleChangeCity={handleChangeCity}
                />
            </OModal>
        </>
    )
}