import React from 'react'
import { useLanguage, useOrder, useConfig } from 'ordering-components/native'
import { ScrollView, StyleSheet, TouchableOpacity, View, Dimensions } from 'react-native'
import { useTheme } from 'styled-components/native'
import { OButton, OModal, OText } from '../shared'
import AntDesignIcon from 'react-native-vector-icons/AntDesign'
import {
    ProductsList,
    TagsContainer,
    SortContainer,
    BrandContainer,
    BrandItem,
    PriceFilterWrapper,
    BContainer,
    WrapperButtons
} from './styles'
import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
import { MaxSectionItem } from './MaxSectionItem'

export const BusinessSearchFooter = (props: any) => {
    const {
        businessesSearchList,
        handleCloseFilters,
        handleChangeFilters,
        brandList,
        filters,
        handleChangeBrandFilter,
        handleChangePriceRange,
        businessTypes,
        handleApplyFilters,
        clearFilters,
        handleChangeActiveBusinessType,
        openFilters
    } = props

    const screenHeight = Dimensions.get('window').height;
    const theme = useTheme()
    const [orderState] = useOrder()

    const [, t] = useLanguage()
    const [{ configs }] = useConfig()

    const maxDeliveryFeeOptions = [15, 25, 35, 'default']
    // const maxProductPriceOptions = [5, 10, 15, 'default']
    const maxDistanceOptions = [1000, 2000, 5000, 'default']
    const maxTimeOptions = [5, 15, 30, 'default']
    const sortItems = [
        { text: t('PICKED_FOR_YOU', 'Picked for you (default)'), value: 'distance' },
        { text: t('DELIVERY_TIME', 'Delivery time'), value: 'delivery_time' },
        { text: t('PICKUP_TIME', 'Pickup time'), value: 'pickup_time' }
    ]

    const priceList = [
        { level: '1', content: '$' },
        { level: '2', content: '$$' },
        { level: '3', content: '$$$' },
        { level: '4', content: '$$$$' },
        { level: '5', content: '$$$$$' }
    ]

    const filterOptionsEnabled = configs?.filter_search_options?.value?.split('|') || []

    const styles = StyleSheet.create({
        container: {
            paddingHorizontal: 40,
            width: '100%'
        },
        filterContainer: {
            maxHeight: screenHeight - 150,
            paddingHorizontal: 20,
            width: '100%'
        },
        businessTypesContainer: {
            width: '100%',
            flexDirection: 'row',
            flexWrap: 'wrap',
            justifyContent: 'center'
        },
        priceContainer: {
            width: '100%',
            flexDirection: 'row',
            flexWrap: 'wrap',
            justifyContent: 'space-between'
        },
        categoryStyle: {
            marginRight: 10,
            marginTop: 10,
            borderRadius: 50,
            paddingHorizontal: 10,
            paddingVertical: 4,
            paddingLeft: 0,
            paddingRight: 0,
            height: 28,
            borderWidth: 0
        },
        priceItem: {
            marginRight: 10,
            marginTop: 10,
            borderRadius: 50,
            paddingVertical: 4,
            paddingLeft: 5,
            paddingRight: 5,
            height: 27,
            borderWidth: 0
        },
        applyButton: {
            paddingHorizontal: 10,
            width: '100%',
            marginTop: 20
        }
    });

    return (
        <>
            <BContainer
                style={{ paddingHorizontal: 20 }}
            >
                <ProductsList>
                    {businessesSearchList?.loading && (
                        <>
                            {[...Array(3).keys()].map(
                                (item, i) => (
                                    <View key={`skeleton:${i}`} style={{ width: '100%', marginTop: 20 }}>
                                        <Placeholder key={i} style={{ paddingHorizontal: 5 }} Animation={Fade}>
                                            <View style={{ flexDirection: 'row' }}>
                                                <PlaceholderLine
                                                    width={24}
                                                    height={70}
                                                    style={{ marginRight: 10, marginBottom: 10 }}
                                                />
                                                <Placeholder style={{ paddingVertical: 10 }}>
                                                    <PlaceholderLine width={20} style={{ marginBottom: 25 }} />
                                                    <PlaceholderLine width={60} />
                                                </Placeholder>
                                            </View>
                                        </Placeholder>
                                        <Placeholder style={{ paddingHorizontal: 5, bottom: 10 }} Animation={Fade}>
                                            <View style={{ flexDirection: 'row-reverse', overflow: 'hidden' }}>
                                                <PlaceholderLine
                                                    width={24}
                                                    height={70}
                                                    style={{ marginRight: 10, marginBottom: 5 }}
                                                />
                                                <Placeholder style={{ paddingVertical: 10 }}>
                                                    <PlaceholderLine width={60} height={10} />
                                                    <PlaceholderLine width={50} height={10} />
                                                    <PlaceholderLine width={70} height={10} />
                                                </Placeholder>
                                            </View>
                                        </Placeholder>
                                    </View>
                                ),
                            )}
                        </>
                    )}
                </ProductsList>
            </BContainer>
            <OModal
                open={openFilters}
                onCancel={() => handleCloseFilters()}
                onClose={() => handleCloseFilters()}
            >
                <ScrollView style={styles.filterContainer}>
                    <OText
                        size={20}
                        mBottom={15}
                        style={{ marginTop: 10 }}
                    >
                        {t('FILTER', 'Filter')}
                    </OText>
                    {filterOptionsEnabled.includes('sort') && (
                        <SortContainer>
                            <OText weight='bold' mBottom={7} size={16}>
                                {t('SORT', 'Sort')}
                            </OText>
                            {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
                                <TouchableOpacity
                                    key={item?.value}
                                    onPress={() => handleChangeFilters('orderBy', item?.value)}
                                    style={{ marginBottom: 7 }}
                                >
                                    <OText
                                        weight={filters?.orderBy?.includes(item?.value) ? 'bold' : '500'}
                                        mBottom={filters?.orderBy?.includes(item?.value) ? 5 : 0}
                                    >
                                        {item?.text}  {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <AntDesignIcon name='caretup' /> : <AntDesignIcon name='caretdown' />}</>}
                                    </OText>
                                </TouchableOpacity>
                            ))}
                        </SortContainer>
                    )}
                    {filterOptionsEnabled.includes('brands') && (

                        <BrandContainer>
                            <OText
                                size={16}
                                weight='bold'
                                lineHeight={24}
                                style={{ marginBottom: 10 }}
                            >
                                {t('BRANDS', 'Brands')}
                            </OText>
                            {!brandList?.loading && !brandList?.error && brandList?.brands?.length > 0 && (
                                <ScrollView
                                    style={{ maxHeight: 300, marginBottom: 10 }}
                                    showsVerticalScrollIndicator={true}
                                    nestedScrollEnabled={true}
                                >
                                    {brandList?.brands.map((brand: any, i: number) => brand?.enabled && (
                                        <BrandItem
                                            key={i}
                                            onPress={() => handleChangeBrandFilter(brand?.id)}
                                        >
                                            <OText
                                                size={14}
                                                weight={'400'}
                                                lineHeight={24}
                                            >
                                                {brand?.name}
                                            </OText>
                                            {filters?.franchise_ids?.includes(brand?.id) && (
                                                <AntDesignIcon
                                                    name='check'
                                                    color={theme.colors.success500}
                                                    size={16}
                                                />
                                            )}
                                        </BrandItem>
                                    ))}
                                </ScrollView>
                            )}
                            {!brandList?.loading && ((brandList?.brands?.filter((brand: any) => brand?.enabled))?.length === 0) && (
                                <OText size={14} weight='400'>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
                            )}
                        </BrandContainer>
                    )}
                    {filterOptionsEnabled.includes('price_range') && (
                        <PriceFilterWrapper>
                            <OText
                                size={16}
                                weight='bold'
                                lineHeight={24}
                                style={{ marginBottom: 5 }}
                            >
                                {t('PRICE_RANGE', 'Price range')}
                            </OText>
                            <View style={styles.priceContainer}>
                                {priceList.map((price: any, i: number) => (
                                    <OButton
                                        key={i}
                                        bgColor={(filters?.price_level === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
                                        onClick={() => handleChangePriceRange(price?.level)}
                                        text={`${price.content} ${(filters?.price_level === price?.level) ? ' X' : ''}`}
                                        style={styles.priceItem}
                                        textStyle={{ fontSize: 10, color: (filters?.price_level === price?.level) ? theme.colors.white : theme.colors.textNormal }}
                                    />
                                ))}
                            </View>
                        </PriceFilterWrapper>
                    )}
                    {orderState?.options?.type === 1 && filterOptionsEnabled.includes('max_delivery_fee') && (
                        <MaxSectionItem
                            filters={filters}
                            title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}
                            options={maxDeliveryFeeOptions}
                            filter='max_delivery_price'
                            handleChangeFilters={handleChangeFilters}
                        />
                    )}
                    {[1, 2].includes(orderState?.options?.type) && filterOptionsEnabled.includes('max_delivery_time') && (
                        <MaxSectionItem
                            filters={filters}
                            title={orderState?.options?.type === 1 ? t('MAX_DELIVERY_TIME', 'Max delivery time') : t('MAX_PICKUP_TIME', 'Max pickup time')}
                            options={maxTimeOptions}
                            filter='max_eta'
                            handleChangeFilters={handleChangeFilters}
                        />
                    )}
                    {filterOptionsEnabled.includes('max_distance') && (
                        <MaxSectionItem
                            filters={filters}
                            title={t('MAX_DISTANCE', 'Max distance')}
                            options={maxDistanceOptions}
                            filter='max_distance'
                            handleChangeFilters={handleChangeFilters}
                        />
                    )}
                    {businessTypes?.length > 0 && filterOptionsEnabled.includes('business_categories') && (
                        <TagsContainer>
                            <OText weight='bold' mBottom={7} size={16}>{t('BUSINESS_CATEGORIES', 'Business categories')}</OText>
                            <View style={styles.businessTypesContainer}>
                                {businessTypes.map((type: any, i: number) => type.enabled && (
                                    <OButton
                                        key={type?.id}
                                        bgColor={(filters?.business_types?.includes(type?.id) || (type?.id === null && filters?.business_types?.length === 0)) ? theme.colors.primary : theme.colors.backgroundGray200}
                                        onClick={() => handleChangeActiveBusinessType(type)}
                                        text={`${t(`BUSINESS_TYPE_${type.name.replace(/\s/g, '_').toUpperCase()}`, type.name)} ${filters?.business_types?.includes(type?.id) ? 'X' : ''}`}
                                        style={styles.categoryStyle}
                                        textStyle={{ fontSize: 10, color: (filters?.business_types?.includes(type?.id) || (type?.id === null && filters?.business_types?.length === 0)) ? theme.colors.white : theme.colors.textNormal }}
                                    />
                                ))}
                            </View>
                        </TagsContainer>
                    )}
                </ScrollView>
                <WrapperButtons>
                    <View style={{ width: '50%' }}>
                        <OButton
                            text={t('APPLY', 'Apply')}
                            parentStyle={styles.applyButton}
                            onClick={() => handleApplyFilters()}
                        />
                    </View>
                    <View style={{ width: '50%' }}>
                        <OButton
                            text={t('CLEAR_FILTERS', 'Clear')}
                            bgColor={theme.colors.white}
                            borderColor={theme.colors.primary}
                            parentStyle={styles.applyButton}
                            textStyle={{ color: theme.colors.primary }}
                            onClick={() => clearFilters()}
                        />
                    </View>
                </WrapperButtons>
            </OModal>
        </>
    )
}